Table des matières
Le Tutoriel de Bootstrap Sizing Utility
View more Tutorials:
Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles.
Facebook
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%">
