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 :
Classes a utiliser :
.jumbotron
.jumbotron-fluid
Jumbotron
On utilise une balise div dans laquelle on place la classe .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 !
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.
.change {
background-color: black;
color: white;
text-align: center;
}
Mettre une image de fond dans un jumbotron
.change {
background-image: url(servers2-min.png);
background-size: cover;
background-repeat: no-repeat;
color: white;
text-align: center;
}
