Coder Perfect

I’m not sure how to make space between two buttons in the same div.


What is the best method to space Bootstrap buttons horizontally?

The buttons are currently in contact:

<div class="btn-group">
    <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
        <i class="icon-in-button"></i>  
        Add to list
        <span class="caret"/>
    <ul class="dropdown-menu">
            <a href="#">here</a>
            <a href="#">new</a>
    <button class="btn btn-info">
        <i class="icon-in-button"></i>  

The following is an example of a jsfiddle that illustrates the issue:

Asked by daydreamer

Solution #1

Instead of btn-group, put them in btn-toolbar or another container. btn-group connects them all. More information can be found in the 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’ll need to use utility classes like mx-2 to add suitable margin to your groups.

Answered by Miroslav Popovic

Solution #2

As instructed by bro Miroslav Popovic, simply place the buttons in a class (class=”btn-toolbar”). It’s fantastic.

Answered by Manmohan

Solution #3

You don’t need any additional CSS for Bootstrap if you use space. All you have to do now is add the classes to your buttons. This is for the fourth version.

Answered by Dragan B.

Solution #4

Dragan B’s suggestion for Bootstrap 4 is the best way to go. I’ve included an example below. mr-3, for example, 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>

p.s. In my situation, I wanted my buttons to appear on the right side of the screen, thus I used pull-right.

Answered by mrana

Solution #5

Bootstrap v.4 should be used.

<div class="form-group row">
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn1">
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn2">

Answered by Mark Dibeh

Post is based on