Vous avez certainement rencontré des sites créés avec Bootstrap comportant des panneaux occupant toute la largeur de la page. On réalise cela facilement avec la classe
jumbotron, mais il faut organiser différemment le code. Il ne faut pas le mettre dans
un conteneur, en revanche il faut en prévoir un à l’intérieur.
Voici un exemple :
<div class="jumbotron">
<div class="container">
<h1> Bonjour je suis le Jumbotron </h1>
<p> J'aime bien prendre mes aises et occuper tout l'espace pour que l'on me remarque facilement ! </p>
<p> < a class="btn btn-info btn-lg" role ="button" > En savoir plus <span class="fab fa-hand-right" > </span > </a> </p>
</div>
</div>
Ce qui donne la figure
J'aime bien prendre mes aises et occuper tout l'espace pour que l'on me remarque facilement !
.jumbotron
.<div class="container">
<div class="jumbotron">
<h2>
Bienvenue sur apcpedagogie.com!
</h2>
<p>
Bootstrap est le framework HTML,
CSS et JS le plus répandu pour le développement
de projets réactifs et d’abord mobiles sur le Web.
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Lire plus</a>
</p>
</div>
</div>
.jumbotron
en dehors de toutes les classes de conteneurs, et ajoutez plutôt un .container
à l’intérieur, comme indiqué dans l’exemple suivant:<div class="jumbotron">
<div class="container">
<h2>
Bienvenue sur apcpedagogie.com!
</h2>
<p>
Bootstrap est le framework HTML,
CSS et JS le plus répandu pour le développement
de projets réactifs et d’abord mobiles sur le Web.
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Lire plus</a>
</p>
</div>
</div>
.jumbotron-fluid
de modificateur et ajoutez a l’intérieur la classe .container
ou .container-fluid
.<!-- Jumbotron -->
<div class="jumbotron text-center">
<!-- Titre -->
<h4 class="card-title h4 pb-2">
<strong>Notre nature</strong></h4>
<!-- Card image -->
<div class="view overlay my-4">
<img src="apcpedagogie.jpg" class="img-fluid" alt="">
<a href="apcpedagogie.com">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<h5 class="indigo-text h5 mb-4">La rivère</h5>
<p class="card-text">Une rivière est un cours d'eau au débit moyen à
modéré (supérieur à 2 m3/s), recevant des affluents et qui se
jette dans une autre rivière ou dans un fleuve.</p>
<!-- Linkedin -->
<a href="#"><i class="fa fa-linkedin-in grey-text"></i></a>
<!-- Twitter -->
<a href="#"><i class="fa fa-twitter grey-text"></i></a>
<!-- Dribbble -->
<a href="#"><i class="fa fa-facebook-f grey-text"></i></a>
</div>
<!-- Jumbotron -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dark Variant of Bootstrap Jumbotron</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-lg my-4">
<div class="p-5 mb-4 bg-dark text-white rounded-3">
<h1>Apprendre à créer des sites Web</h1>
<p class="lead">Dans le monde d'aujourd'hui, Internet est le moyen le plus populaire de se connecter avec les gens. Sur <a href="https://www.apcpedagogie.com" target="_blank" class="text-white">apcpedagogie.com</a> vous apprendrez l'essentiel des technologies de développement Web ainsi que des exemples pratiques réels, afin que vous puissiez créer votre propre site Web pour vous connecter avec les gens du monde entier.</p>
<p><a href="https://www.tutorialrepublic.com" target="_blank" class="btn btn-light btn-lg">Commencez à apprendre aujourd'hui</a></p>
</div>
tutorialrepublic.com ,
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
<p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
</div>
</body>
</html>