How to give spacing between buttons using bootstrap

Html Problem Overview

I want to give spacing between buttons is there a way to give spacing using bootstrap so that they will be consistent for different screen resolutions.

I tried using margin-left But is it the correct way to do this.??

Here is the demo

HTML:

<div class="btn-toolbar text-center well">
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> EDIT CUSTOMER
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-time" aria-hidden="true"></span> HISTORY
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> DELETE CUSTOMER
    </button>
</div>

CSS:

.margin-left{
    margin-left: 80px !important;
}

Html Solutions

Solution 1 - Html

You can achieved by use bootstrap Spacing. Bootstrap Spacing includes a wide range of shorthand responsive margin and padding. In below example mr-1 set the margin or padding to $spacer * .25.

Example:

<button class="btn btn-outline-primary mr-1" href="#">Sign up</button>
<button class="btn btn-outline-primary" href="#">Login</button>

You can read more at Bootstrap Spacing.

Solution 2 - Html

HTML:

<input id="id_ok" class="btn btn-space" value="OK" type="button">
<input id="id_cancel" class="btn btn-space" value="Cancel" type="button">

CSS:

.btn-space {
    margin-right: 5px;
}

Solution 3 - Html

Wrap your buttons in a div with class='col-xs-3' (for example).
Add class="btn-block" to your buttons.

This will provide permanent spacing.

Solution 4 - Html

If you want use margin, remove the class on every button and use :last-child CSS selector.

Html :

<div class="btn-toolbar text-center well">
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> EDIT CUSTOMER
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-time" aria-hidden="true"></span> HISTORY
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> DELETE CUSTOMER
    </button>
</div>

Css :

.btn-toolbar .btn{
    margin-right: 5px;
}
.btn-toolbar .btn:last-child{
    margin-right: 0;
}

Solution 5 - Html

I am pretty bad at html but I used   between the buttons and it worked well.

Solution 6 - Html

Depends on how much space you want. I'm not sure I agree with the logic of adding a "col-XX-1" in between each one, because you are then defining an entire "column" in between each one.

If you just want "a little spacing" in between each button, I like to add padding to the encompassing row. That way, I can still use all 12 columns, while including a "space" in between each button.

Bootply: http://www.bootply.com/ugeXrxpPvD

Solution 7 - Html

Use btn-primary-spacing class for all buttons remove margin-left class

Example :

<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
</button>

CSS will be like :

.btn-primary-spacing 
{
margin-right: 5px;
margin-bottom: 5px !important;
}

Solution 8 - Html

It varies according to bootstrap version

If you are using

Bootsrap 4

> mr-1

for more refer the official Bootsrap 4 margin-and-padding link

Bootstrap 5

> me-1

for more refer the official Bootsrap 5 margin-and-padding link

Solution 9 - Html

You can use built-in spacing from Bootstrap so no need for additional CSS there. This is for Bootstrap 4.

Solution 10 - Html

The original code is mostly there, but you need btn-groups around each button. In Bootstrap 3 you can use a btn-toolbar and a btn-group to get the job done; I haven't done BS4 but it has similar constructs.

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group" role="group">
    <button class="btn btn-default">Button 1</button>
  </div>
  <div class="btn-group" role="group">
    <button class="btn btn-default">Button 2</button>
  </div>
</div>

Solution 11 - Html

Adding margins to a button makes it wider so that les buttons fit in the grid system. If only a visual effect is important, then give the button a white border with [style="margin:0px; border:solid white;"] This leaves the button width unaffected.

Solution 12 - Html

using bootstrap you can add <div class="col-sm-1 col-xs-1 col-md-1 col-lg-1"></div> between buttons.

Content Type	Original Author	Original Content on Stackoverflow
Question	Vaibhav Jain	View Question on Stackoverflow
Solution 1 - Html	Asif Raza	View Answer on Stackoverflow
Solution 2 - Html	Sergey Chepurnov	View Answer on Stackoverflow
Solution 3 - Html	Alex Khlebaev	View Answer on Stackoverflow
Solution 4 - Html	Thibaud Granier	View Answer on Stackoverflow
Solution 5 - Html	Philippe Remy	View Answer on Stackoverflow
Solution 6 - Html	ganders	View Answer on Stackoverflow
Solution 7 - Html	Shashikala	View Answer on Stackoverflow
Solution 8 - Html	Srikrushna	View Answer on Stackoverflow
Solution 9 - Html	Dragan B.	View Answer on Stackoverflow
Solution 10 - Html	Mike K	View Answer on Stackoverflow
Solution 11 - Html	Theo Knoops	View Answer on Stackoverflow
Solution 12 - Html	Joaquin Oscar Ibar	View Answer on Stackoverflow