Cómo dar espacio entre botones usando bootstrap

Quiero dar espacio entre botones, ¿hay alguna manera de dar espacio usando bootstrap para que sean consistentes para diferentes resoluciones de pantalla?

Intenté usar ¿ margin-leftPero es la forma correcta de hacer esto?

Aquí está la demostración

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

Puede lograrlo mediante el uso de bootstrap Spacing . Bootstrap Spacing incluye una amplia gama de margen y relleno de respuesta abreviada. En el siguiente ejemplo, mr-1establezca margino paddingen $spacer* .25.

Ejemplo:

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

Puede leer más en Bootstrap Spacing .

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

1. Envuelva sus botones en un div con class='col-xs-3'(por ejemplo).
2. Agregue class="btn-block"a sus botones.

Esto proporcionará un espacio permanente.

Si desea usar el margen, elimine la clase en cada botón y use : selector de CSS del último hijo .

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

Depende de la cantidad de espacio que desee. No estoy seguro de estar de acuerdo con la lógica de agregar un "col-XX-1" entre cada uno, porque luego está definiendo una "columna" completa entre cada uno.

Si solo desea "un poco de espacio" entre cada botón, me gusta agregar relleno a la fila circundante. De esa manera, todavía puedo usar las 12 columnas, mientras incluyo un "espacio" entre cada botón.

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

Usar btn-primary-spacingclase para todos los botones eliminar margin-leftclase

Ejemplo:

<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 será como:

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

Puede usar el espaciado incorporado de Bootstrap, por lo que no es necesario CSS adicional allí. Esto es para Bootstrap 4.

Agregar márgenes a un botón lo hace más ancho para que los botones quepan en el sistema de cuadrícula. Si solo es importante un efecto visual, entonces dé al botón un borde blanco con [style = "margin: 0px; border: solid white;"] Esto no afecta el ancho del botón.

El código original está mayormente ahí, pero necesita btn-groups alrededor de cada botón. En Bootstrap 3 puede usar una barra de herramientas btn y un grupo btn para hacer el trabajo; No he hecho BS4 pero tiene construcciones similares.

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

Soy bastante malo en html pero usé  entre los botones y funcionó bien.

usando bootstrap puede agregar <div class="col-sm-1 col-xs-1 col-md-1 col-lg-1"></div>entre botones.