Comment faire de l'espace entre deux boutons dans la même div ?

Question

Quel est le meilleur moyen d'espacer horizontalement les boutons Bootstrap ?

En ce moment, les boutons se touchent :

<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 montrant le problème : http://jsfiddle.net/hhimanshu/sYLRq/4/

Answer 1

Il suffit de mettre les boutons dans une classe ( class="btn-toolbar" ) comme le dit le frère 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>

Answer 2

Vous pouvez utiliser l'espacement pour Bootstrap et pas besoin de CSS supplémentaire. Ajoutez simplement les classes à vos boutons. C'est pour la version 4.

Answer 3

Ce que Dragan B a suggéré est la bonne façon d'utiliser Bootstrap 4. J'ai mis un exemple ci-dessous. par exemple mr-3 est marge-droite :1rem !important

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

p.s : dans mon cas je voulais que mes boutons soient affichés à droite de l'écran et donc tirer à droite.

Answer 4

vous devez utiliser 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>