How to give spacing between buttons using bootstrap

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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.