Como posso abrir espaço entre dois botões na mesma div?

Qual é a melhor maneira de espaçar horizontalmente os botões do Bootstrap?

No momento, os botões estão 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 mostrando o problema: http://jsfiddle.net/hhimanshu/sYLRq/4/

Coloque-os dentro btn-toolbarou em algum outro recipiente, não btn-group. btn-groupune-os. Mais informações sobre a documentação do Bootstrap .

Edit: A pergunta original era para o Bootstrap 2.x, mas o mesmo ainda é válido para o Bootstrap 3 e o Bootstrap 4 .

No Bootstrap 4, você precisará adicionar uma margem apropriada aos seus grupos usando classes de utilitário, como mx-2.

Basta colocar os botões em uma classe (class = "btn-toolbar"), conforme informado pelo irmão Miroslav Popovic.

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

Você pode usar o espaçamento para o Bootstrap e não precisa de nenhum CSS adicional. Basta adicionar as classes aos seus botões. Isto é para a versão 4.

você deve usar o 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>

O que Dragan B sugeriu é o caminho certo a seguir para o Bootstrap 4. Coloquei um exemplo abaixo. por exemplo, o sr-3 está na margem direita: 1rem!

<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: no meu caso, queria que meus botões fossem exibidos à direita da tela e, portanto, pressionados.

A maneira mais fácil na maioria das situações é a margem.

Onde você pode fazer:

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

OU

button{
  margin: 13px;
}

Usei o plug-in Bootstrap 4 botões ( https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin ) e adicionei a classe arredondada aos rótulos e a classe mx-1 ao botão do meio para obter o aparência desejada de botões de opção separados. O uso da classe btn-toolbar fez aparecer os círculos dos botões de opção, o que não era o que eu queria. Espero que isso ajude alguém.

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

Outra maneira de conseguir isso é adicionar uma classe .btn-space nos seus botões

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

e defina esta classe da seguinte maneira

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

Na verdade, eu corri para o mesmo requisito. Simplesmente usei a substituição de CSS como esta

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

se você usar o Bootstrap, poderá mudar de estilo, como: Se quiser apenas uma página, entre as tags de cabeçalho, adicione .btn-group btn {margin-right: 1rem;}

Se for para todo o site, adicione ao arquivo css

A solução de Dragan B. está correta. No meu caso, eu precisava que os botões fossem espaçados verticalmente ao empilhar, então adicionei a propriedade mb-2 a eles.

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

Acabei fazendo algo semelhante ao que mark dibe fez, mas precisava descobrir o espaçamento de uma maneira um pouco diferente.

As col-xclasses no bootstrap podem ser um salva-vidas absoluto. Acabei fazendo algo parecido com isto:

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

Isso me permitiu alinhar títulos e chaves de entrada de uma maneira bem espaçada. A mesma idéia pode ser aplicada aos botões e permitir que você pare de tocar.

(Nota: queria que este fosse um comentário no link acima, mas minha reputação não é alta o suficiente)