Le Tutoriel de Bootstrap Sizing Utility

Bootstrap Sizing

1. Bootstrap Sizing

Bootstrap Sizing qui est une utilité de Bootstrap, fournit quelques couches qui vous permet de définir la largeur et la hauteur d'un élément.

Class .w-*

Classe	Description
w-25	Équivalent à utilisation de Css {width: 25%}.
w-50	Équivalent à utilisation de Css {width: 50%}.
w-75	Équivalent à utilisation de Css {width: 75%}.
w-100	Équivalent à utilisation de Css {width: 100%}.
w-auto	Équivalent à utilisation de Css {width: auto}.

w-example

<div class="border p-1">

   <div class="w-25 p-3 bg-primary">Width 25%</div>
   <div class="w-50 p-3 bg-secondary">Width 50%</div>
   <div class="w-75 p-3 bg-info">Width 75%</div>
   <div class="w-100 p-3 bg-danger">Width 100%</div>
   <div class="w-auto p-3 bg-success">Width auto</div>

</div>

Class .h-*

Classe	Description
h-25	Équivalent à utilisation de Css {height: 25%}.
h-50	Équivalent à utilisation de Css {height: 50%}.
h-75	Équivalent à utilisation de Css {height: 75%}.
h-100	Équivalent à utilisation de Css {height: 100%}.
h-auto	Équivalent à utilisation de Css {height: auto}.

h-example

<div class="border p-1 mt-3" style="height:155px;">
   <div class="h-25 bg-primary" style="display:inline-block; width: 55px;">
      .h-25
   </div>
   <div class="h-50 bg-secondary" style="display:inline-block; width: 55px;">
      .h-50
   </div>
   <div class="h-75 bg-info" style="display:inline-block; width: 55px;">
      .h-75
   </div>
   <div class="h-100 bg-danger" style="display:inline-block; width: 55px;">
      .h-100
   </div>
   <div class="h-auto bg-success" style="display:inline-block; width: 70px;">
      .h-auto
   </div>
</div>

.mw-100, .mh-100

Classe	Description
.mw-100	Équivalent à utilisation de Css {max-width: 100%}.
.mh-100	Équivalent à utilisation de Css {max-height: 100%}.

mw-100-example

<h4>Image with max-width:100%</h4>

<img class="mw-100" src="../images/flower.jpeg" alt="Max width 100%">

Le Tutoriel de Bootstrap Sizing Utility

1. Bootstrap Sizing

Tutoriels de programmation Bootstrap

Tutoriels de programmation Bootstrap

Articles les plus récents