How can I make space between two buttons in same div?

Question

What is the best way to horizontally space Bootstrap buttons?

At the moment the buttons are touching:

    

        
                      

              相关标签:
       
      

Answer 1

I actual ran into the same requirement. I simply used CSS override like this

.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }

Answer 2

The easiest way in most situations is margin.

Where you can do :

button{
  margin: 13px 12px 12px 10px;
}

OR

button{
  margin: 13px;
}

Answer 3

I used the Bootstrap 4 buttons plugin (https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin) and added the class rounded to the labels and the class mx-1 to the middle button to achieve the desired look and feel of separate radio buttons. Using the class btn-toolbar made the radio button circles appear for me which is not what I wanted. Hope this helps someone.

        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary active rounded">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
            </label>
            <label class="btn btn-secondary rounded mx-1">
                <input type="radio" name="options" id="option2" autocomplete="off"> Radio
            </label>
            <label class="btn btn-secondary rounded">
                <input type="radio" name="options" id="option3" autocomplete="off"> Radio
            </label>
        </div>

Answer 4

What Dragan B suggested is right way to go for Bootstrap 4. I have put one example below. e.g. mr-3 is margin-right:1rem!important

<div class="btn-toolbar pull-right">
   <button type="button" class="btn mr-3">btn1</button>
   <button type="button" class="btn mr-3">btn2</button>
   <button type="button" class="btn">btn3</button>
</div>

p.s: in my case I wanted my buttons to be displayed to the right of the screen and hence pull-right.

Answer 5

if use Bootstrap, you can change with style like: If you want only in one page, then betwen head tags add .btn-group btn{margin-right:1rem;}

If is for all the web site add to css file

Answer 6

Put them inside btn-toolbar or some other container, not btn-group. btn-group joins them together. More info on Bootstrap documentation.

Edit: The original question was for Bootstrap 2.x, but the same is still valid for Bootstrap 3 and Bootstrap 4.

In Bootstrap 4 you will need to add appropriate margin to your groups using utility classes, such as mx-2.