Sommaire

La largeur des boutons CSS POUR LES BOUTONS:Largeur

Vous pouvez gérer la largeur des boutons à l’aide de trois classes :

  • .btn-lg pour une largeur importante.

  • .btn-sm pour une largeur petite.

  • .btn-xs pour une largeur très petite.

Si vous n’indiquez pas de classe, la largeur est standard.

Le code HTML pour ces boutons :

<p><button type="button" class="btn btn-default">Libellé</button>
</p> 
<p><button type="button" class="btn btn-default btn-lg">Libellé
</button></p> 
<p><button type="button" class="btn btn-default btn-sm">Libellé
</button></p> 
<p><button type="button" class="btn btn-default btn-xs">Libellé
</button></p>

L’affichage :

images/C06-002.png

Pour le bouton de largeur « standard », les sélecteurs CSS correspondent aux sélecteurs communs des boutons vus précédemment.

Pour les boutons larges, voici la classe utilisée :

.btn-lg { 
   padding: 10px 16px; 
   font-size: 18px; 
   line-height: 1.33; 
   border-radius: 6px; 
}

Pour les boutons petits, voici la classe utilisée :

.btn-sm, 
.btn-xs { 
   padding: 5px 10px; 
   font-size: 12px; 
   line-height: 1.5; 
   border-radius: 3px; 
}

Pour les boutons très petits, voici les classes utilisées :

.btn-sm, 
.btn-xs {  ...