Bootstrap 4 - Icône de fermeture Clearfix
La description
L'utilitaire Clearfix est utilisé pour effacer le contenu flottant dans un conteneur et fermer l'icône pour ignorer le contenu tel que les alertes ou les modaux.
Exemple
Pour l'utilitaire clearfix, utilisez la classe .clearfix pour l'élément parent et fermez le contenu en ajoutant une classe close sur l'élément.
L'exemple suivant montre l'utilisation de clearfix et de l'icône de fermeture -
<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">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container-fluid">
<h2>Clearfix</h2>
<div class = "bg-secondary clearfix">
<button type = "button" class = "btn btn-success float-left">Left Button</button>
<button type = "button" class = "btn btn-success float-right">Right Button</button>
</div>
<br>
<h2>Close</h2>
<button type =" button" class = "close" aria-label = "Close">
<span aria-hidden = "true">×</span>
</button>
</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 -