¿Cómo puedo hacer espacio entre dos botones en el mismo div?

¿Cuál es la mejor manera de espaciar horizontalmente los botones Bootstrap?

En este momento los botones están tocando:

<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"/>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">here</a>
        </li>
        <li>
            <a href="#">new</a>
        </li>
    </ul>
    <button class="btn btn-info">
        <i class="icon-in-button"></i>  
        more
    </button>
</div>

jsfiddle muestra el problema: http://jsfiddle.net/hhimanshu/sYLRq/4/

Póngalos dentro btn-toolbaro en algún otro recipiente, no btn-group. btn-groupse une a ellos Más información sobre la documentación de Bootstrap .

Editar: La pregunta original era para Bootstrap 2.x, pero la misma sigue siendo válida para Bootstrap 3 y Bootstrap 4 .

En Bootstrap 4 necesitará agregar un margen apropiado a sus grupos usando clases de utilidad, como mx-2.

Simplemente coloque los botones en una clase (class = "btn-toolbar") como lo dijo el hermano Miroslav Popovic. Funciona de maravilla.

<div class="btn-toolbar">
  <button type="button" id="btnSubmit" class="btn btn-primary btn-sm">Submit</button>
  <button type="button" id="btnCancel" class="btn btn-primary btn-sm">Cancel</button>
</div>

Puede usar el espaciado para Bootstrap y no necesita CSS adicional. Simplemente agregue las clases a sus botones. Esto es para la versión 4.

deberías usar bootstrap v.4

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

Lo que sugirió Dragan B es el camino correcto para Bootstrap 4. He puesto un ejemplo a continuación. por ejemplo, mr-3 es margen derecho: 1rem! importante

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

ps: en mi caso, quería que mis botones se mostraran a la derecha de la pantalla y, por lo tanto, tirar a la derecha.

La forma más fácil en la mayoría de las situaciones es el margen.

Donde puedes hacer:

button{
  margin: 13px 12px 12px 10px;
}

O

button{
  margin: 13px;
}

Utilicé el complemento Bootstrap 4 botones ( https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin ) y agregué la clase redondeada a las etiquetas y la clase mx-1 al botón central para lograr el aspecto deseado de botones de radio separados. El uso de la barra de herramientas de clase btn hizo que me aparecieran los círculos de los botones de radio, que no es lo que quería. Espero que esto ayude a alguien.

        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary active rounded">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
            </label>
            <label class="btn btn-secondary rounded mx-1">
                <input type="radio" name="options" id="option2" autocomplete="off"> Radio
            </label>
            <label class="btn btn-secondary rounded">
                <input type="radio" name="options" id="option3" autocomplete="off"> Radio
            </label>
        </div>

Otra forma de lograr esto es agregar una clase .btn-space en sus botones

  <button type="button" class="btn btn-outline-danger btn-space"
  </button>
  <button type="button" class="btn btn-outline-primary btn-space"
  </button>

y defina esta clase de la siguiente manera

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

Realmente me encontré con el mismo requisito. Simplemente utilicé la anulación de CSS como esta

.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }

si usa Bootstrap, puede cambiar con un estilo como: Si desea solo en una página, luego, entre las etiquetas de encabezado, agregue .btn-group btn {margin-right: 1rem;}

Si es para todo el sitio web, agregue al archivo css

Dragan B. la solución es correcta. En mi caso, necesitaba que los botones se espaciaran verticalmente al apilar, así que les agregué la propiedad mb-2.

<div class="btn-toolbar">
   <button type="button" class="btn btn-primary mr-2 mb-2">First</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Second</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Third</button>
</div>

Terminé haciendo algo similar a lo que Mark Dibe , pero necesitaba descubrir el espacio de una manera ligeramente diferente.

Las col-xclases en bootstrap pueden ser un salvavidas absoluto. Terminé haciendo algo similar a esto:

<div class="row col-12">
    <div class="col-3">Title</div>
</div>
<div class="row col-12">
    <div class="col-3">Bootstrap Switch</div>
<div>

Esto me permitió alinear títulos e interruptores de entrada de una manera bien espaciada. La misma idea se puede aplicar a los botones y le permite detener el toque de los botones.

(Nota al margen: quería que esto fuera un comentario en el enlace anterior, pero mi reputación no es lo suficientemente alta)