Space Between Buttons with Bootstrap Class

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

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.

How can I get spacing between buttons in a justified button group?

Welcome to flexbox!

• Enable flex behaviors
• Flex fill

Also, to make things a little less cramped...

• Spacing utilities

And for the sake of this demo...

• Background color

• Borders

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="d-flex bg-light border py-1" id="indicative">
  <button type="button" id="indicative-present"
    class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">present</button>
  <button type="button" id="indicative-preterite"
    class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">preterite</button>
  <button type="button" id="indicative-imperfect" 
    class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">imperfect</button>
  <button type="button" id="indicative-conditional" 
    class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">conditional</button>
  <button type="button" id="indicative-future" 
    class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">future</button>
</div>

Space between buttons with bootstrap class

Yes you have to wrap them

<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>

EDITED CODEPEN

Bootstrap 4 buttons example: where does the space between buttons is coming from?

The space is there because there's whitespace between the HTML elements. If you remove the whitespace, the buttons will be positioned next to each other.

Note that whitespace (newline) between the elements is condensed to a single space by the browser.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>

Now if we remove the whitespace:

<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button>

Bootstrap 4.1 spaces between buttons

Use the spacing utils. For example mr-1 means margin right 1 spacer unit...

<div class="container">
  <button _class="btn btn-success mr-1" type="submit">Add</button><button class="btn btn-danger mr-1" type="button">Delete</button><button  class="btn btn-primary" type="button">Clear</button> 
</div>

Related: How do I use the Spacing Utility Classes on Bootstrap 4

---

Related Topics