Space Between Bootstrap 3 Buttons

Space between Bootstrap 3 buttons

The newline between the buttons actually causes the space. Observe:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-default">Button 1</button><button class="btn btn-default">Button 2</button><button class="btn btn-default">Button 3</button>

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.

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

How to make a space between buttons in bootstrap using ml-auto?

First of all I think both of your buttons need to sit inside a .row element. Right now they are on different rows. Then you can apply a class like .mr-2 (margin right of 2 units, or increase the number if you want more) to the first button wrapper. Then you will have some spacing between your buttons.

<div class="row">
  <div class="form-group">
    <div class="col-xs-3 mr-2">
       <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
         Start New Course
       </button>
    </div>
  </div>

  <div class="form-group">
    <div class="col-xs-3">
      <a class="btn btn-large btn-success" id="viewCourse" href="@Url.Action("ViewCourses", "Home")">View Grades</a>
      <script type="text/javascript">
        $('#ViewCourses').on('click', function (e) {});
      </script>
    </div>
  </div>
</div>

You can see a working solution here: https://codepen.io/razvan-tudosa/pen/YzqvQVm

More info about how to space stuff you can find in the twitter bootstrap docs: https://getbootstrap.com/docs/4.5/utilities/spacing/

---

Related Topics