Bootstrap 4: jumbotron

bootstrap 4

Un jumbotron est un grand bloc qui a pour but d’attirer l’attention sur un contenu ou une information spécifique.
Il peut contenir du texte, une image, une vidéo etc.
Il est par défaut de couleur grise, mais vous pouvez changer ses paramètres dans votre propre fichier css. C’est d’ailleurs ce que nous ferons dans cette leçon.

Rappel du code pour utiliser bootstrap 4 :

Bootstrap 4 debuter

Classes a utiliser :

.jumbotron

.jumbotron-fluid

Jumbotron

On utilise une balise div dans laquelle on place la classe .jumbotron.

Bootstrap 4 jumbotron
Bootstrap 4 jumbotron

Jumbotron pleine largeur

On rajoute à la classe .jumbotron la classe .jumbotron-fluid et cette fois-ci on met le conteneur dans le .jumbotron et non plus le .jumbotron dans le conteneur, c’est très important !

Bootstrap 4 jumbotron-fluid
Bootstrap 4 jumbotron-fluid

Changer les paramètres css du jumbotron

Bien, comme vous pouvez le voir le jumbotron de bootstrap a des spécificités css prédéfinies.
Si on veut les changer, on va rajouter une classe à notre classe .jumbotron pour pouvoir ensuite s’en servir dans notre propre fichier css afin de changer certaines de ces spécificités.

Dans notre exemple, on va :

  • Changer la couleur de fond en noir.
  • Changer la couleur du texte en blanc.
  • Aligner le texte au centre.
Jumbotron-fluid bootstrap 4
Bootstrap 4 jumbotron

.change {
background-color: black;
color: white;
text-align: center;
}

Mettre une image de fond dans un jumbotron

Bootstrap 4 jumbotron

.change {
background-image: url(servers2-min.png);
background-size: cover;
background-repeat: no-repeat;
color: white;
text-align: center;
}

Laisser un commentaire