Un jumbotron Bootstrap spécifie une grande boîte pour attirer l’attention sur un contenu ou une information particulière. Il s’affiche sous la forme d’une boîte grise à coins arrondis. Il peut également agrandir les tailles de police du texte qu’il contient.
Vous pouvez mettre n’importe quel code HTML valide ou d’autres éléments / classes Bootstrap dans un jumbotron.
La classe .jumbotron dans l’élément <div> est utilisée pour créer un jumbotron.
Jumbotron à l’intérieur de Container
Utilisez un jumbotron à l’intérieur d’un conteneur si vous souhaitez que le jumbotron ne s’étende pas au bord de l’écran.
Placez le jumbotron dans le <div class = « container »>.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>This is Jumbotron inside container!</h1>
<p>Jumbotron spécifie une grande boîte pour attirer l'attention sur un contenu ou une information particulière.</p>
</div>
<p>Ceci est du texte.</p>
<p>Ceci est un autre texte.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
Jumbotron à l’extérieur de Container
Il est utilisé lorsque vous souhaitez que le jumbotron s’étende jusqu’aux bords de l’écran.
Placez le jumbotron en dehors de <div class = « container »>.
<!DOCTYPE html> <html lang="fr"> <head> <title>Bootstrap Exemple</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body> <div class="jumbotron"> <h1>This is Jumbotron outside container!</h1> <p>Jumbotron spécifie une grande boîte pour attirer l'attention sur un contenu ou une information particulière.</p> </div> <div class="container"> <p>Ceci est un texte</p> <p>Ceci est un autre texte</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </html>
Jumbotron en pleine largeur
Pour obtenir un jumbotron sans bord arrondi, vous devez ajouter la classe .jumbotron-fluid et un .container ou .container-fluid à l’intérieur.
Exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Full-width Jumbotron</h1>
<p>Jumbotron spécifie une grande boîte pour attirer l'attention sur un contenu ou une information particulière.</p>
</div>
<div class="container">
<p>Ceci est du texte.</p>
<p>Ceci est un autre texte</p>
</div>
</body>
</html>
Bootstrap En-tête de page
Un en-tête de page est comme un diviseur de section. Il ajoute une ligne horizontale sous le titre.
La classe .page-header est utilisée pour créer un en-tête de page.
Exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Example Page Header</h1>
</div>
<p>Ceci est un texte.</p>
<p>Ceci est un autre texte.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>