72

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;
}

10 Answers 10

73

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.

|improve this answer|||||
  • 7
    just added mr-1 and boom. Thanks @A.Raza. – ImFarhad Jul 12 '18 at 7:50
  • 4
    this is for bootstrap4 – Hassaan Aug 25 '18 at 20:46
  • Yes, this is for "twbs 4.x". – Asif Raza Aug 27 '18 at 17:24
  • 1
    Thanks, this was what I was looking for ! – Nahue Gonzalez Feb 28 at 14:31
1

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>
|improve this answer|||||
  • I implemented this, but it does not provide vertical spacing for the buttons, which was noticeable for me when they wrapped onto two lines/"rows". – LeeC Dec 19 '19 at 14:27
2

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.

|improve this answer|||||
2

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

|improve this answer|||||
3

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;
}
|improve this answer|||||
  • 2
    Where does the class btn-primary-spacing come from? – ToniTornado Sep 7 '16 at 9:47
  • 1
    Looks like a custom implementation. Some code would be nice here – Markus Graf Oct 21 '16 at 11:30
9

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;
}
|improve this answer|||||
13
  1. Wrap your buttons in a div with class='col-xs-3' (for example).
  2. Add class="btn-block" to your buttons.

This will provide permanent spacing.

|improve this answer|||||
  • But if I use class='col-xs-2' instead of class='col-xs-3' the orientation distorts.. – vaibhav jain Jan 17 '15 at 3:38
  • This also helps when you want the buttons to wrap under each other on smaller resolutions. "To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. " - source: getbootstrap.com/docs/3.4/css – Fanky Jan 3 '19 at 14:16
65

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;
}
|improve this answer|||||
  • 1
    Even though it wasn't explicitly mentioned, the OP meant they want gutters on buttons in a row. This solution will break bootstrap's grid, causing buttons whose sum takes 100% width to start wrapping. – papiro Jan 23 '19 at 23:18
4

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

|improve this answer|||||
  • @brauliobo add yours as an answer because I believe it's the correct one. – ganders Jun 9 '16 at 12:24
0

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

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.