Faire passer le bouton sur toute sa largeur?

Je veux qu'un bouton occupe toute la largeur de la colonne, mais ayant des difficultés ...

<div class="span9 btn-block">
    <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>

Comment rendre le bouton aussi large que la colonne?

Bootstrap v3 et v4

Utilisez la btn-blockclasse sur votre bouton / élément

Bootstrap v2

Utilisez la input-block-levelclasse sur votre bouton / élément

Pourquoi ne pas utiliser la classe prédéfinie Bootstrap input-block-levelqui fait le travail?

<a href="#" class="btn input-block-level">Full-Width Button</a> <!-- BS2 -->
<a href="#" class="btn form-control">Full-Width Button</a> <!-- BS3 -->

<!-- And let's join both for BS# :) -->
<a href="#" class="btn input-block-level form-control">Full-Width Button</a>

En savoir plus ici dans la section Contrôle du dimensionnement ^ .

J'ai simplement utilisé ceci:

<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>

Bootstrap 4.1+

utilisation col-12, btn-block, w-100ouform-control

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-success col-12">
             class="col-12"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-primary w-100">
             class="w-100"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-secondary btn-block">
             class="btn-block"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-success form-control">
             class="form-control"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-danger" style="width:100%">
             style="width:100%"
         </button>
     </div>
</div>

utilisation

<div class="btn-group btn-group-justified">
  ...
</div>

mais cela ne fonctionne que pour les éléments <a> et non pour les éléments <button>.

voir: http://getbootstrap.com/components/#btn-groups-justified

Vous devez ajouter ces styles à une feuille CSS

div .no-padding {
  padding:0;
}

button .full-width{
  width:100%;
  //display:block; //only if you're having issues
}

Puis changez ajouter les classes à votre code

<div class="span9 btn-block no-padding">
    <button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button>
</div>

Je n'ai pas testé cela et je ne suis pas sûr à 100% de ce que vous voulez, mais je pense que cela vous rapprochera.

J'aurais pensé que ce serait la façon la plus bootstrap de faire les choses:

<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>

Tout ce que je fais, c'est ajouter la classe col-xs-12au bouton.

<div class="col-md-9">
    <button class="btn btn-block btn-primary" type="button">Block level button</button>
</div>

Dans Bootstrap 3, cela devrait être tout ce dont vous avez besoin. Je crois que cela btn-largedépassait la largeur de btn-block.

La largeur du bouton est définie par le texte du bouton. Donc, si vous souhaitez définir la largeur du bouton, vous pouvez utiliser une largeur définie en utilisant un pixel dans le CSS ou si vous le souhaitez en utilisant réactif une valeur de pourcentage.