Bootstrap 4 - Flex
La description
L'utilitaire Flex peut être utilisé pour gérer la mise en page, l'alignement, les colonnes de la grille, la navigation et d'autres composants de la page. Il facilite la conception de la structure de mise en page sans utiliser de flotteur ou de positionnement.
Comportements et direction Flex
Utilisez les utilitaires d'affichage flexbox tels que d-flex et d-inline-flex pour afficher le conteneur flexbox et les éléments enfants dans des éléments flex. Vous pouvez définir la direction des éléments flex dans la direction horizontale et la direction verticale en utilisant .flex-row (utilisez .flex-row-reverse pour afficher la direction horizontale du côté opposé) et .flex-column (utilisez .flex-column-reverse pour afficher respectivement la direction verticale du côté opposé) classes comme indiqué dans l'exemple ci-dessous -
Exemple
<html>
<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>Flex Behaviors</h2>
<div class = "d-flex p-2 bg-info">
This is flex container, uses the 'd-flex' class
</div>
<br>
<div class = "d-inline-flex p-2 bg-info">
This is inline flexbox container, uses the 'd-inline-flex' class
</div>
<br>
<br>
<h2>Direction</h2>
<h4>Horizontal Direction</h4>
<div class = "d-flex flex-row bg-info mb-3">
<div class = "p-2 border border-dark ">flex-row: Item 1</div>
<div class = "p-2 border border-dark">flex-row: Item 2</div>
<div class = "p-2 border border-dark">flex-row: Item 3</div>
</div>
<div class = "d-flex flex-row-reverse bg-info">
<div class = "p-2 border border-dark">flex-row-reverse: Item 1</div>
<div class = "p-2 border border-dark">flex-row-reverse: Item 2</div>
<div class = "p-2 border border-dark">flex-row-reverse: Item 3</div>
</div>
<br>
<h4>Vertical Direction</h4>
<div class = "d-flex flex-column bg-info mb-3">
<div class = "p-2 border border-dark">flex-column: Item 1</div>
<div class = "p-2 border border-dark">flex-column: Item 2</div>
<div class = "p-2 border border-dark">flex-column: Item 3</div>
</div>
<div class = "d-flex flex-column-reverse bg-info">
<div class = "p-2 border border-dark">flex-column-reverse: Item 1</div>
<div class = "p-2 border border-dark">flex-column-reverse: Item 2</div>
<div class = "p-2 border border-dark">flex-column-reverse: Item 3</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
Justifier le contenu
L'alignement des éléments flexibles (tels que le début, la fin, le centre, entre et autour) peut être modifié sur l'axe principal (axe x pour commencer) des conteneurs flexbox à l'aide de l' utilitaire justify-content .
L'exemple suivant illustre ceci -
Exemple
<html>
<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>Alignment - Start</h2>
<div class = "d-flex justify-content-start bg-info">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</div>
</div>
<br>
<h2>Alignment - End</h2>
<div class = "d-flex justify-content-end bg-info">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</div>
</div>
<br>
<h2>Alignment - Center</h2>
<div class = "d-flex justify-content-center bg-info">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</div>
</div>
<br>
<h2>Alignment - Between</h2>
<div class = "d-flex justify-content-between bg-info">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</div>
</div>
<br>
<h2>Alignment - Around</h2>
<div class = "d-flex justify-content-around bg-info">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</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
Aligner les éléments
L'alignement des éléments flexibles (tels que le début, la fin, le centre, la ligne de base et l'étirement) peut être modifié sur l'axe transversal (axe y au début) des conteneurs flexbox à l'aide de l' utilitaire align-items .
L'exemple suivant illustre ceci -
Exemple
<html>
<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>Align Items - Start</h2>
<div class = "d-flex align-items-start bg-info" style = "height: 100px">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</div>
</div>
<br>
<h2>Align Items - End</h2>
<div class = "d-flex align-items-end bg-info" style = "height: 100px">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</div>
</div>
<br>
<h2>Align Items - Center</h2>
<div class = "d-flex align-items-center bg-info" style = "height: 100px">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</div>
</div>
<br>
<h2>Align Items - Baseline</h2>
<div class = "d-flex align-items-baseline bg-info" style = "height: 100px">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</div>
</div>
<br>
<h2>Align Items - Stretch</h2>
<div class = "d-flex align-items-stretch bg-info" style = "height: 100px">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</div>
</div>
<br>
</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
Remplir, agrandir et rétrécir
Les éléments peuvent être affichés dans une largeur égale sur un espace horizontal à l'aide de la classe .flex-fill . L'élément flex augmentera s'il y a de l'espace disponible en utilisant la classe .flex-grow- * et l'élément flex diminuera, si nécessaire en utilisant la classe .flex-shrink- * .
L'exemple suivant montre l'utilisation des utilitaires ci-dessus -
Exemple
<html>
<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>Fill</h2>
<div class = "d-flex bg-info">
<div class = "p-2 flex-fill border border-dark">Item 1</div>
<div class = "p-2 flex-fill border border-dark">Item 2</div>
<div class = "p-2 flex-fill border border-dark">Item 3</div>
</div>
<br>
<h2>Grow</h2>
<div class = "d-flex bg-info">
<div class = "p-2 flex-grow-1 bg-info">Item 1 (Using class flex-grow-1)</div>
<div class = "p-2 bg-warning">Item 2</div>
<div class = "p-2 bg-secondary">Item 3</div>
</div>
<br>
<h2>Shrink</h2>
<div class = "d-flex bg-info">
<div class = "p-2 w-100 bg-info">Item 1</div>
<div class = "p-2 flex-shrink-1 bg-warning">Item 2 (Using class flex-shrink-1)</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
Marges automatiques et avec align-items
L'utilitaire flex fournit une fonction de marge automatique sur les éléments flex en utilisant les classes .mr-auto (pousse les éléments vers la droite) et .ml-auto (pousse les éléments vers la gauche). Les éléments flex peuvent être déplacés vers le haut ou vers le bas en utilisant les classes mt-auto ou mb-auto sur un conteneur.
L'exemple suivant montre l'utilisation des classes ci-dessus -
Exemple
<html>
<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>Auto Margins</h2>
<div class = "d-flex bg-info mb-3">
<div class = "p-2 bg-warning">Item 1</div>
<div class = "p-2 bg-primary">Item 2</div>
<div class = "p-2 bg-secondary">Item 3</div>
</div>
<div class = "d-flex bg-info mb-3">
<div class = "mr-auto p-2 bg-warning">mr-auto: Item 1</div>
<div class = "p-2 bg-primary">Item 2</div>
<div class = "p-2 bg-secondary">Item 3</div>
</div>
<div class = "d-flex bg-info mb-3">
<div class = "p-2 bg-secondary">Item 1</div>
<div class = "p-2 bg-primary">Item 2</div>
<div class = "ml-auto p-2 bg-warning">ml-auto: Item 3</div>
</div>
<h2>With align-items</h2>
<div class = "d-flex align-items-start flex-column bg-info mb-3"
style = "height: 200px;">
<div class = "mb-auto p-2 bg-warning">mb-auto: Item 1</div>
<div class = "p-2 bg-primary">Item 2</div>
<div class = "p-2 bg-secondary">Item 3</div>
</div>
<div class = "d-flex align-items-end flex-column bg-info mb-3"
style = "height: 200px;">
<div class = "p-2 bg-secondary">Item 1</div>
<div class = "p-2 bg-primary">Item 2</div>
<div class = "mt-auto p-2 bg-warning">mt-auto: Item 3</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
Ordre
Le flex utilise des utilitaires de commande pour modifier l'ordre des éléments flex dans un conteneur, comme illustré dans l'exemple suivant -
Exemple
<html>
<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>Flex Items Order</h2>
<div class = "d-flex flex-nowrap bg-info">
<div class = "order-3 p-2 bg-secondary">'order-3': Item 1</div>
<div class = "order-1 p-2 bg-primary">'order-1': Item 2</div>
<div class = "order-2 p-2 bg-warning">'order-2': Item 3</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
Aligner le contenu
Vous pouvez aligner (par exemple, début, fin, centre, entre et autour) les éléments flexibles sur l'axe transversal du conteneur à l'aide de l' utilitaire align-content .
L'exemple suivant illustre ceci -
Exemple
<html>
<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>align-content-start</h2>
<div class = "d-flex bg-info align-content-start flex-wrap" style = "height: 150px">
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
</div>
<br>
<h2>align-content-end</h2>
<div class = "d-flex bg-info align-content-end flex-wrap" style = "height: 150px">
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
</div>
<br>
<h2>align-content-center</h2>
<div class = "d-flex bg-info align-content-center flex-wrap" style = "height: 150px">
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
</div>
<br>
<h2>align-content-between</h2>
<div class = "d-flex bg-info align-content-between flex-wrap" style = "height: 150px">
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
</div>
<br>
<h2>align-content-around</h2>
<div class = "d-flex bg-info align-content-around flex-wrap" style = "height: 150px">
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
</div>
<br>
</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 -