Bootstrap - Jumbotron

Ce chapitre traitera d'une autre caractéristique que Bootstrap prend en charge, le Jumbotron. Comme son nom l'indique, ce composant peut éventuellement augmenter la taille des en-têtes et ajouter beaucoup de marge pour le contenu de la page de destination. Pour utiliser le Jumbotron –

1. Créez un conteneur <div> avec la classe .jumbotron.
2. En ajoutant un <h1> plus grand, le poids de la police est réduit à 200px.

L'exemple suivant illustre ceci –

<div class = "container">

   <div class = "jumbotron">

      <h1> Bienvenue sur notre page h1>

      <p> C'est un exemple pour le jumbotron.</p>

      <p>

         <a class = "btn btn-primary btn-lg" role = "button">Lire la suite</a>

      </p>

   </div>

</div>

Le résultat :

Pour obtenir un jumbotron de pleine largeur et sans coins arrondis, utilisez la classe .jumbotron en dehors de toutes les classes .container et ajoutez plutôt un .container à l'intérieur, comme illustré dans l'exemple suivant –

<div class = "jumbotron">

   <div class = "container">

      <h1> Bienvenue sur notre page!</h1>

      <p> C'est un exemple pour le jumbotron.</p>

     <p>

     <a class = "btn btn-primary btn-lg" role = "button">Lire la suite</a>

     </p>

   </div>

</div>

<<<Précédent              Début            Suivant>>>