Bootstrap 4 : Jumbotron

Dans Bootstrap 4, Jumbotron est une class qui permet de définir un cadre assez large pour attirer l'attention du visiteur sur un contenu ou une information.
Voyons concrètement comment mettre cela en place : 

<div class="jumbotron">
    <div class="container">
        <h1>Rabais 30%</h1>
        <p>Vous bénéficiez de ce rabais pour tous les produits achetés à partir de maintenant</p>
    </div>
</div>

Et le résultat

Rabais 30%

Vous bénéficiez de ce rabais pour tous les produits achetés à partir de maintenant

Vous pouvez aussi définir un Jumbotron pour qu'il prenne toute la largeur disponible. Cela se fait en ajoutant la class .jumbotron-fluid. Il faut noter qu'en utilisant cette class, les bords de notre cadre ne sont plus arrondis.

<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1>Rabais 30%</h1>
        <p>Vous bénéficiez de ce rabais pour tous les produits achetés à partir de maintenant</p>
    </div>
</div>

Rabais 30%

Vous bénéficiez de ce rabais pour tous les produits achetés à partir de maintenant

Il est aussi possible d'ajouter les autres composants Bootstrap dans ce cadre Jumbotron. Dans notre exemple, nous allons ajouter un bouton pour pousser le visiteur à l'achat. 

<div class="jumbotron">
    <div class="container">
        <h1>Rabais 30%</h1>
        <p>Vous bénéficiez de ce rabais pour tous les produits achetés à partir de maintenant</p>    
        <hr />
        <p>Commandez au plus vite et profitez de cette réduction</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">Commander dès maintenant</a>
    </div>
</div>

Rabais 30%

Vous bénéficiez de ce rabais pour tous les produits achetés à partir de maintenant


Commandez au plus vite et profitez de cette réduction

Commander dès maintenant

Dans ce dernier exemple ci-dessus, on pouvait mettre la class .container-fluid à la place de .container

Partager :
comments powered by Disqus

Suivez-moi sur Twitter

Copyright © 2010-2019 Lookman Design, tous droits réservés .