Bootstrap 4 - Dimensionnement
La description
Vous pouvez rendre la taille d'un élément large ou haute à l'aide des utilitaires de largeur et de hauteur.
Utilitaires de largeur et de hauteur
La largeur et la hauteur peuvent être définies pour un élément, en utilisant des valeurs de 25%, 50%, 75%, 100% et auto. Par exemple, utilisez w-25 (pour les valeurs restantes, remplacez 25 par ces valeurs) pour l'utilitaire de largeur et h-25 (pour les valeurs restantes, remplacez 25 par ces valeurs) pour l'utilitaire de hauteur.
L'exemple suivant illustre la définition des utilitaires de largeur et de hauteur pour un élément -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Width</h2>
<div class = "w-auto p-3" style = "background-color: #aaa;">
Width : auto
</div>
<br>
<div class = "w-100 p-3" style = "background-color: #aaa;">
Width : 100%
</div>
<br>
<div class = "w-75 p-3" style = "background-color: #aaa;">
Width : 75%
</div>
<br>
<div class = "w-50 p-3" style = "background-color: #aaa;">
Width : 50%
</div>
<br>
<div class = "w-25 p-3" style = "background-color: #aaa;">
Width : 25%
</div>
<br>
<h2>Height</h2>
<div class = "bg-secondary" style = "height: 100px; ">
<div class = "h-100 d-inline-block bg-info" style = "width: 120px;">
Height : 100%
</div>
<div class = "h-75 d-inline-block bg-info" style = "width: 120px;">
Height : 75%
</div>
<div class = "h-50 d-inline-block bg-info" style = "width: 120px; ">
Height : 50%
</div>
<div class = "h-25 d-inline-block bg-info" style = "width: 120px;">
Height : 25%
</div>
<div class = "h-auto d-inline-block bg-info" style = "width: 120px;">
Height : auto
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src =" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity =" sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Utilitaires Max-Width et Max-Height
Vous pouvez également définir la largeur et la hauteur maximales d'un élément à l'aide des utilitaires mw-100 et mh-100, comme indiqué dans l'exemple ci-dessous -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Max Width</h2>
<img class = "mw-100"
src = "https://www.q1ins.com/wp-content/uploads/2016/09/black-transparent-box.png"
alt = "Max-width 100%">
<br>
<br>
<h2>Max Height</h2>
<div class = "bg-secondary" style = "height: 100px;">
<div class = "mh-100 bg-info" style = "width: 100px; height: 200px;">
Max-height : 100%
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -