Créer un Jumbotron Bootstrap

Sommaire

1- Objectifs
2- Définition
3- Utilisation
4- Jumbotron sans coin arrondi
5- Jumbotron avec image
6- Application
6.1.1- Sommaire du cours Bootstrap

Créer un Jumbotron Bootstrap

Objectifs

Connaitre le composant Jumbotron Bootstrap
Être capable de créer un Jumbotron Bootstrap

Définition

Un jumbotron est une grande boîte sert à attirer l’attention sur un contenu ou une information particulière.
Un jumbotron est affiché comme une boîte grise avec des coins arrondis. Il agrandit également les tailles de police du texte qu’il contient.
Le jumbotron affiche un bloc en haut d’une page web, avec pour objectif d’attirer l’attention de l’utilisateur sur un élément particulier.

Utilisation

Dans un jumbotron, vous pouvez insérer presque tous les codes HTML valides, y compris les autres éléments / classes de Bootstrap.
Pour utiliser Jumbotron:

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

<div class="container">
      <div class="jumbotron">
				<h2>
					Bienvenue sur apcpedagogie.com!
				</h2>
				<p>
					Bootstrap est le framework HTML, 
CSS et JS le plus répandu pour le développement
                                        de projets réactifs et d’abord mobiles sur le Web.
				</p>
				<p>
					<a class="btn btn-primary btn-large" href="#">Lire plus</a>
				</p>
     </div> 
</div>

Ce qui nous donne:

Jumbotron sans coin arrondi

Pour obtenir une largeur de jumbotron complète et sans angles arrondis, utilisez la classe .jumbotron en dehors de toutes les classes de conteneurs, et ajoutez plutôt un .container à l’intérieur, comme indiqué dans l’exemple suivant:

<div class="jumbotron">
      <div class="container">
				<h2>
					Bienvenue sur apcpedagogie.com!
				</h2>
				<p>
					Bootstrap est le framework HTML, 
CSS et JS le plus répandu pour le développement
                                        de projets réactifs et d’abord mobiles sur le Web.
				</p>
				<p>
					<a class="btn btn-primary btn-large" href="#">Lire plus</a>
				</p>
     </div> 
</div>

Jumbotron avec image

Pour que le jumbotron atteigne toute sa largeur et sans angles arrondis, ajoutez la classe .jumbotron-fluid de modificateur et ajoutez a l’intérieur la classe .container ou .container-fluid.

<!-- Jumbotron -->
<div class="jumbotron text-center">
    <!-- Titre -->
    <h4 class="card-title h4 pb-2">
        <strong>Notre nature</strong></h4> 
    <!-- Card image -->
    <div class="view overlay my-4">
      <img src="apcpedagogie.jpg" class="img-fluid" alt="">
      <a href="apcpedagogie.com">
        <div class="mask rgba-white-slight"></div>
      </a>
    </div> 
    <h5 class="indigo-text h5 mb-4">La rivère</h5>
    <p class="card-text">Une rivière est un cours d'eau au débit moyen à
 modéré (supérieur à 2 m3/s), recevant des affluents et qui se 
jette dans une autre rivière ou dans un fleuve.</p>
    <!-- Linkedin -->
    <a href="#"><i class="fa fa-linkedin-in grey-text"></i></a>
    <!-- Twitter -->
    <a href="#"><i class="fa fa-twitter grey-text"></i></a>
    <!-- Dribbble -->
    <a href="#"><i class="fa fa-facebook-f grey-text"></i></a>
  
  </div>
  <!-- Jumbotron -->

Ce qui nous donne:

Application

Écrire le code Bootstrap qui vous permet de réaliser le jumbotron illustré dans le schéma suivant:

Afficher la solution


<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dark Variant of Bootstrap Jumbotron</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container-lg my-4">    
    
        <div class="p-5 mb-4 bg-dark text-white rounded-3">
            <h1>Apprendre à créer des sites Web</h1>
            <p class="lead">Dans le monde d'aujourd'hui, Internet est le moyen le plus populaire de se connecter avec les gens. Sur <a href="https://www.apcpedagogie.com" target="_blank" class="text-white">apcpedagogie.com</a> vous apprendrez l'essentiel des technologies de développement Web ainsi que des exemples pratiques réels, afin que vous puissiez créer votre propre site Web pour vous connecter avec les gens du monde entier.</p>
            <p><a href="https://www.tutorialrepublic.com" target="_blank" class="btn btn-light btn-lg">Commencez à apprendre aujourd'hui</a></p>
        </div>

         tutorialrepublic.com , 
        
        
        
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
        <p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
    </div>
</body>
</html>

Sommaire du cours Bootstrap

Bootstrap

Créer un Jumbotron Bootstrap

Créer un Jumbotron Bootstrap

Objectifs

Définition

Utilisation

Jumbotron sans coin arrondi

Jumbotron avec image

Application

Sommaire du cours Bootstrap

Les composants Bootstrap

Le composant Card Bootstrap

Bootstrap

Créer un Jumbotron Bootstrap

Objectifs

Définition

Utilisation

Jumbotron sans coin arrondi

Jumbotron avec image

Application

Sommaire du cours Bootstrap

Les composants Bootstrap

Le composant Card Bootstrap

You may also like

TP9 : Plateforme de Location de Salles en Ligne

TP8 Création d’un projet Bootstrap

Examen 5 en HTML , CSS et Bootstrap