Le Tutoriel de Bootstrap Sizing Utility
View more Tutorials:
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%">
