Jumbotron Bootsrap

Dans ce tutoriel, je vous propose de découvrir le composant Jumbotron vous permettant d'afficher un élément graphique que l'on place généralement en haut de page.


<div class="jumbotron">

  <h1>Bonjour tout le monde!</h1>

  <p>Ingeniis anim cernantur possumus, voluptate relinqueret et commodo est sed iis legam probant in si dolor incididunt despicationes. Quid occaecat hic coniunctione, nescius duis esse singulis anim eu illum ubi nostrud ab amet mentitum exercitation. Deserunt ea quae cernantur an legam occaecat quamquam et incurreret elit ab occaecat coniunctione, incididunt veniam an aliquip.</p>

  <p><a href="#" class="btn btn-primary btn-lg" role="button" title="En savoir +">En savoir +</a></p>

</div>

Exemple

Bonjour tout le monde!

Ingeniis anim cernantur possumus, voluptate relinqueret et commodo est sed iis legam probant in si dolor incididunt despicationes. Quid occaecat hic coniunctione, nescius duis esse singulis anim eu illum ubi nostrud ab amet mentitum exercitation. Deserunt ea quae cernantur an legam occaecat quamquam et incurreret elit ab occaecat coniunctione, incididunt veniam an aliquip.

En savoir +

Pour avoir un jumbotron qui prend 100% de votre page, vous pouvez utiliser les classes .contaner et .container-fluid


<div class="jumbotron">

  <div class="container">

    ...

  </div>

</div>


<div class="jumbotron">

  <div class="container-fluid">

    ...

  </div>

</div>

Tester

Page header

Le page header est comme un séparateur de section. La classe .page-header ajoute une ligne horizontale en dessous de l'élément.


<div class="page-header">

  <h1>Example page header <small>Subtext for header</small></h1>

</div>

Exemple

Tutoriel Bootstrap

Jumbotron Bootsrap

Bonjour tout le monde!

Page header

Example page header Subtext for header