Bootstrap

WEB DESIGNER UI/UX - Approche développement frontend
Introduction à Bootstrap à travers 15 exemples

1
Bootstrap est le framework CSS le plus célèbre au monde. C’est une bibliothèque CSS qui fournit une liste d’outils, des
boutons et une grille, qui simplifient la création de design de sites et d’applications web.
https://bootstrap-cheatsheet.themeselection.com/
https://bootstrap21.org/fr/docs/5.2/examples/
Table des matières

1. Création d'une barre de navigation responsive .......................................................................................................... 2
2. Utilisation de la grille Bootstrap.................................................................................................................................. 5
3. Création de boutons stylisés ....................................................................................................................................... 9
4. Utilisation des composants de formulaire Bootstrap ............................................................................................... 11
5. Intégration de carrousels d'images ........................................................................................................................... 14
6. Création de modales Bootstrap ................................................................................................................................ 16
7. Utilisation des icônes Bootstrap ............................................................................................................................... 19
8. Création de cartes Bootstrap .................................................................................................................................... 21
9. Ajout de barres de progression................................................................................................................................. 24
10. Responsive Embeds................................................................................................................................................. 26
11. Utilisation de l'image de fond ................................................................................................................................. 28
12. Pagination ............................................................................................................................................................... 29
13. Afficher un toast...................................................................................................................................................... 30
14. Spinners................................................................................................................................................................... 31
15. Utilisation des Utilities ............................................................................................................................................ 32
2
1. Création d'une barre de navigation responsive : Utilisez la classe navbar de Bootstrap pour créer une barre
de navigation qui s'adapte à différentes tailles d'écran.
3
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Mon Site avec Bootstrap</title>
 class="navbar" : classe Bootstrap qui
<link href="css/bootstrap.min.css" rel="stylesheet"> indique que cet élément est une
 barre de navigation.
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
class="navbar-expand-lg" : adaptation
<body> en fonction de la taille de l’écran


<nav class="navbar navbar-expand-lg navbar-light bg-light"> class="navbar-light bg-light" : crée
<div class="container"> une apparence de barre de navigation
 avec un fond clair et du texte foncé
<a class="navbar-brand" href="#">Mon Site</a> pour une meilleure lisibilité

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-
controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
class="nabar-toggler" : bouton de
</button> bascule – pour petit écran

<div class="collapse navbar-collapse" id="navbarNav">

<ul class="navbar-nav">

<li class="nav-item active">
<a class="nav-link" href="#">Accueil <span class="visually-hidden">(current)</span></a>
</li>

<li class="nav-item"> texte qui est masqué visuellement
<a class="nav-link" href="#">À propos</a> mais rendu accessible aux lecteurs
</li> d'écran (accessibilité)
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav> Fonctionnalités de Bootstrap (modales, les
onglets, les carrousels, bascule de la barre
de navigation, etc.)

<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
4
Ajouter des pages avec ce menu : créer les fichiers HTML distincts pour chaque page du site,
puis ajouter des liens vers ces pages dans la barre de navigation (en utilisant un fichier
externe pour le menu)
<script src="menu.js"></script>
5
2. Utilisation de la grille Bootstrap : Créez une mise en page simple en utilisant le système de grille Bootstrap :
prévoir une barre de navigation en haut, une section principale au centre, et une barre latérale sur le côté
droit et gauche et un pied de page :
6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mon Site avec Bootstrap</title>

<link rel="stylesheet" href="css/bootstrap.css">
 Conteneur qui s'étend sur toute la
<link rel="stylesheet" href="css/style.css"> largeur de la fenêtre du navigateur
 (mises en page réactives et
<meta name="viewport" content="width=device-width, initial-scale=1"> adaptatives)
</head>
<body>
<div class="container-fluid">

<div class="row">
<div class="col-lg-12 bordureJaune">

<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Mon Site</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-
controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<a class="nav-link active" aria-current="page" href="#">Accueil</a>
</li>
<a class="nav-link" href="#">À propos</a>
</li>
<a class="nav-link" href="#">Services</a>
</li>
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>


<div class="row">

<div class="col-lg-2 bordureVerte">
7
<h2>Barre latérale gauche</h2>
<p>Contenu de la barre latérale gauche</p>
</div>


<div class="col-lg-8 bordureRouge">
<h1>Section principale</h1>
<p>Contenu de la section principale</p>
</div>


<div class="col-lg-2 bordureBleue">
<h2>Barre latérale droite</h2>
<p>Contenu de la barre latérale droite</p>
</div>
</div>


<div class="row">

<div class="col-lg-12 bordureOrange">
<h2>Footer</h2>
<p>Contenu de mon pied de page</p>
</div>
</div>
</div>
</body>
</html>
style.css
.container{ border: 1px solid; }
.bordureRouge{ border: 3px solid red; padding: 10px; }
.bordureVerte{ border: 3px solid green; padding: 10px; }
.bordureBleue{ border: 3px solid blue; padding: 10px; }
.bordureJaune{ border: 3px solid yellow; padding: 10px; }
.bordureOrange{ border: 3px solid orange; padding: 10px; }
8
Ajouter une nouvelle section au site, juste après la section principale. Cette nouvelle section
devrait afficher des témoignages de clients satisfaits.
Etapes :
1. Ajoute une nouvelle colonne :

 Ajoute une nouvelle colonne Bootstrap de taille col-lg-8 pour la nouvelle section, juste après la section
principale.
2. Structure la nouvelle section :

 Dans cette nouvelle colonne, ajoute un titre <h2> pour la section des témoignages.
 En dessous du titre, ajoute plusieurs blocs <div> pour chaque témoignage, avec un titre <h3> pour le
nom du client et un paragraphe <p> pour le témoignage lui-même.
3. Personnalise le contenu :
 Ajoute quelques témoignages fictifs pour remplir la section.
4. Stylise la nouvelle section :

 Utilise des classes CSS pour styliser la nouvelle section, comme bordureViolette par exemple, pour lui
donner une bordure violette.
9
3. Création de boutons stylisés : Utilisez les classes de bouton Bootstrap pour créer différents types de
boutons (par exemple, boutons par défaut, boutons de taille différente, boutons de couleur, etc.).
10
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boutons stylisés avec Bootstrap 5</title>

</head>
<body>
<div class="container">
<h2>Boutons stylisés avec Bootstrap 5</h2>
<p>Exemples de différents types de boutons :</p>


<button type="button" class="btn btn-primary">Bouton par défaut</button>


<button type="button" class="btn btn-primary btn-sm">Petit bouton</button>
<button type="button" class="btn btn-primary">Bouton standard</button>
<button type="button" class="btn btn-primary btn-lg">Grand bouton</button>


<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-secondary">Secondary</button> Bouton désactivé avec l'attribut
disabled.

<button type="button" class="btn btn-primary" disabled>Désactivé</button>
</div>
</body>
</html>
Ajouter une nouvelle série de boutons qui représente des actions principales sur ton site,
comme "Enregistrer", "Supprimer", "Éditer", etc.
Utilise les classes Bootstrap appropriées pour styliser ces boutons selon leur fonction, par
exemple btn-primary pour "Enregistrer", btn-danger pour "Supprimer", etc.
11
4. Utilisation des composants de formulaire Bootstrap : Créez un formulaire simple en utilisant les
composants de formulaire Bootstrap tels que les champs de texte, les cases à cocher, les boutons radio, etc.
12
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Formulaire Bootstrap 5</title>
<link rel="stylesheet" href="css/bootstrap.css"> La classe mb-3 ajouter de
</head> l'espace entre les différents
<body> champs du formulaire
<h2>Formulaire Bootstrap 5</h2>
Appliquer des styles cohérents
<form>
avec le design Bootstrap

<div class="mb-3">
<label for="nom" class="form-label">Nom :</label>
<input type="text" class="form-control" id="nom" placeholder="Entrez votre nom">
</div>


<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Case à cocher</label>
</div>


<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1"
checked>
<label class="form-check-label" for="exampleRadios1">
Option 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Option 2
</label>
</div>
</div>


<div class="mb-3">
<label for="exampleFormControlSelect1" class="form-label">Sélectionnez une option :</label>
<select class="form-select" id="exampleFormControlSelect1">
13
<option>Option 1</option>
</select>
</div>


<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Message :</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>


<button type="submit" class="btn btn-primary">Envoyer</button>
</form>
</div>
</body>
</html>
Modifier le formulaire pour qu’il corresponde à un cas réaliste. Ajouter par exemple des
champs pour la date de naissance, l'adresse e-mail, genre, ville, etc.
Utilise des classes Bootstrap pour styliser le formulaire : ajuster les marges, les couleurs et les
polices pour correspondre à l'esthétique de ton site.
14
5. Intégration de carrousels d'images : Utilisez le composant de carrousel Bootstrap pour créer un diaporama
d'images qui défile automatiquement.
15
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"> carousel indique que cet
élément est un carrousel
slide définit le comportement
<title>Carrousel d'images avec Bootstrap 5</title> du carrousel (change d'élément
 à chaque glissement)
</head>
<body>
<h2>Carrousel d'images avec Bootstrap 5</h2>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
démarrer le défilement
<img src="images/image1.jpg" class="d-block" alt="Image 1">
automatique des diapositives
</div>
<div class="carousel-item">
</div> afficher l'image comme un
élément de bloc
</div>
</div>
</div>
</div>
</div>
</div>


</body>
</html>
Ajuster la vitesse de transition, ajouter des flèches de navigation, ajouter des légendes aux
images
16
6. Création de modales Bootstrap : Utilisez les modales Bootstrap pour afficher des fenêtres modales avec du
contenu supplémentaire lorsqu'un bouton est cliqué.
17
<!DOCTYPE html>
<html lang="fr">
<head>
Indique que le bouton est utilisé pour
<title>Modales Bootstrap 5</title> ouvrir ou fermer une fenêtre modale
 (la fenêtre data-bs-target sera affichée
<link rel="stylesheet" href="css/bootstrap.css"> ou masquée)
</head>
<body>
<h2>Exemple de modal Bootstrap 5</h2>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Ouvrir la modal Fenêtre modal
</button> Effet fondu

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-
hidden="true">
<div class="modal-dialog">
<div class="modal-content">

<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

<div class="modal-body">
<p>Contenu de la modal. Vous pouvez ajouter ici du texte, des images ou d'autres éléments HTML.</p>
</div>

<div class="modal-footer"> fermer la fenêtre modale lorsqu'il est cliqué.

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>

<button type="button" class="btn btn-primary">ok</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
18
Créer une modal pour permettre aux utilisateurs de réserver une place à un événement :
1. Titre de la modal : "Réservation d'une place à l'événement".
2. Contenu de la modal : Un formulaire permettant aux utilisateurs de saisir leur nom, leur
adresse e-mail et éventuellement d'autres informations pertinentes pour la réservation.
3. Boutons d'action : Un bouton pour soumettre la réservation et un bouton pour annuler
la réservation ou fermer la modal.
19
7. Utilisation des icônes Bootstrap : Intégrez des icônes Bootstrap à votre site Web en utilisant la bibliothèque
d'icônes intégrée.
https://icons.getbootstrap.com/
20
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Utilisation des icônes Bootstrap</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
<h2>Exemple d'utilisation des icônes Bootstrap</h2>

<i class="bi bi-alarm"></i>
<i class="bi bi-bell"></i> https://icons.getbootstrap.com/
<i class="bi bi-heart-fill"></i>
<i class="bi bi-archive"></i>
<i class="bi bi-bank"></i>
<i class="bi bi-bell"></i>
<i class="bi bi-bicycle"></i>
<i class="bi bi-bluetooth"></i>
<i class="bi bi-house"></i>
</div>

</body>
</html>
Afficher des icônes à côté des catégories de produits sur ton site (Par exemple, utilise l'icône
d'une maison pour la catégorie "Maison et jardin", une icône de vêtement pour la catégorie
"Mode", etc.)
21
8. Création de cartes Bootstrap : Utilisez les composants de cartes Bootstrap pour afficher du contenu dans
des cartes stylisées avec des en-têtes, des corps et des pieds de page.
22
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Création de cartes Bootstrap</title>
</head>
<body>
<h2>Exemple de cartes Bootstrap</h2>
<div class="row">

<div class="col-md-4">
<div class="card">
<div class="card-header">
En-tête de la carte 1
</div>
<div class="card-body">
<h5 class="card-title">Titre de la carte 1</h5>
<p class="card-text">Contenu de la carte 1. Vous pouvez ajouter ici du texte, des images ou d'autres éléments
HTML.</p>
</div>
<div class="card-footer">
Pied de page de la carte 1
</div>
</div>
</div>

<div class="card">
</div>
HTML.</p>
</div>
</div>
</div>
</div>

<div class="card">
23
</div>
HTML.</p>
</div>
</div>
</div>
</div>
</div>
</div>

</body>
</html>
Adapter le code pour afficher des cartes Bootstrap qui représentent différents produits de
l’exercice précédent :
 Utiliser le nom du produit comme titre de carte et une brève description comme en-
tête de carte et ajouter des images des produits à chaque carte)
 Inclure des détails sur les produits, tels que le prix, la disponibilité, les avis des clients,
etc.
 Pour chaque produit ajouter un bouton "Acheter maintenant" (Utilise la classe btn
pour styliser les boutons "Acheter maintenant".)
24
9. Ajout de barres de progression : Utilisez les composants de barre de progression Bootstrap pour afficher la
progression d'une tâche ou d'une activité sur votre site.
25
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Ajout de barres de progression Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css"> progress : conteneur de barre de progression
</head>
<body>
mb-3 : une marge inférieure de
taille (espace entre les différentes
<div class="container"> barres de progression)
<h2>Exemple de barres de progression Bootstrap</h2>

<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-
valuemax="100">25%</div>
</div>

<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-
valuemax="100">50%</div>
</div>

<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%;" aria-
valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
progress-bar : barre de progression
</div> progress-bar-striped : effet de rayures
</div> progress-bar-animated : animation de
défilement
</body>
</html>
Personnaliser les barres de progression pour les rendre visuellement attrayantes et

intuitives (utiliser différentes couleurs, des animations ou des étiquettes pour
indiquer l'avancement de chaque tâche)
26
10. Responsive Embeds : Intégrez des vidéos YouTube ou d'autres contenus multimédias de manière
responsive en utilisant les classes d'intégration Bootstrap.
27
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Responsive Embeds avec Bootstrap</title>
la classe embed-responsive pour créer un
<link rel="stylesheet" href="css/bootstrap.css"> conteneur qui maintient le rapport
</head> hauteur/largeur de l'élément intégré
<body>
<div class="container"> La classe embed-responsive-16by9

<h2>Exemple de vidéos YouTube intégrées de manière responsive</h2> spécifie un rapport hauteur/largeur de
 16:9
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/InCeVCGtHak?si=_vFVQO7stKHy_W4_" allowfullscreen></iframe>
</div>
</div>

</body>
</html>
Intégrer une carte Google Maps de manière responsive

28
11. Utilisation de l'image de fond : Ajoutez une image de fond à votre page en utilisant les classes Bootstrap pour le
rendre responsive et bien intégré.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Utilisation de l'image de fond avec Bootstrap 5</title>
<style>
/* Ajoutez des styles personnalisés pour votre image de fond */
.bg-image {
/* Définissez l'image de fond et ses propriétés */
background-image: url('images/fond.jpg');
background-size: cover; /* Pour couvrir toute la section */
background-position: center; /* Pour centrer l'image */
height: 100vh; /* Ajustez la hauteur selon vos besoins */
}
</style>
</head>
<body>

<section class="bg-image">
<h1>Bienvenue sur notre site</h1>
<p>C'est une démo d'utilisation d'une image de fond avec Bootstrap 5</p>
</div>
</section>


</body>
</html>
Afficher une image de fond dans un composant carte de bootstrap

29
12. Pagination pour naviguer entre plusieurs pages.
1. Créez un fichier HTML de base.
2. Utilisez le composant de pagination de Bootstrap 5 pour créer une pagination.
3. Ajoutez des styles pour indiquer quelle page est actuellement active.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Pagination</title>
ajoute une marge en haut du conteneur.
</head>
<body>
<div class="container mt-5">
<nav aria-label="navigation">
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav> élément de pagination comme actif
</div>
Elément grisé et non cliquable
</body>
</html>
Créer un ensemble de 5 pages HTML avec une pagination Bootstrap permettant de naviguer
entre elles.
30
13. Afficher un toast pour notifier l'utilisateur.
2. Utilisez le composant toast de Bootstrap 5 pour afficher un message de notification.
3. Ajoutez un bouton qui, lorsqu'il est cliqué, affiche le toast.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Toast</title>

</head>
<body>
<button type="button" class="btn btn-primary" id="notification">Notification</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">

<div id="myToast" class="toast" role="alert" aria-live="assertive" aria-
atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-
label="Close"></button>
</div>
<div class="toast-body">
petit message d'information.
</div>
</div>
</div>
</div>
<script>
document.getElementById('notification').addEventListener('click', () => {
var myToast = new bootstrap.Toast(document.getElementById('myToast'));
myToast.show();
});
</script>
</body>
</html>
Modifiez le JavaScript pour inclure la récupération de l'heure actuelle.

Intégrez l'heure actuelle dans le toast.
31
14. Spinners pour indiquer un chargement.
2. Utilisez les spinners de Bootstrap 5 pour indiquer qu'un contenu est en cours de chargement.
3. Ajoutez à la fois un spinner border et un spinner grow.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Spinner</title>

</head>
<body>
<div class="container mt-5 text-center">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
</div>
</body>
</html>
Ajouter un bouton qui, lorsqu'il est cliqué, déclenche l'affichage du spinner pour
indiquer que le contenu est en cours de chargement pendant 3 secondes
32
15. Utilisation des Utilities : Utiliser les classes utilitaires de Bootstrap pour styliser des éléments.

2. Utilisez les utilitaires de Bootstrap pour ajouter des bordures, modifier les couleurs de texte et de fond, et
contrôler l'affichage des éléments.
3. Créez plusieurs éléments (divs, paragraphes) pour démontrer ces utilitaires.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Utilities</title>

</head>
<body>
<div class="p-3 mb-2 bg-primary text-white">Fond primaire</div>
<div class="p-3 mb-2 bg-secondary text-white">Fond secondaire</div>
<div class="p-3 mb-2 bg-success text-white">Fond de succès</div>
<div class="p-3 mb-2 bg-danger text-white">Fond de danger</div>
<div class="p-3 mb-2 bg-warning text-dark">Fond d'avertissement</div>
<div class="p-3 mb-2 bg-info text-dark">Fond d'information</div>
<div class="border p-3 mb-2">Ceci est une boîte avec une bordure</div>
<div class="border border-primary p-3 mb-2">Boîte avec bordure primaire</div>
<div class="border border-secondary p-3 mb-2">Boîte avec bordure secondaire</div>
</div>
</body>
</html>
Afficher des « boîtes » visibles uniquement sur petit écran

Bootstrap

Transféré par

Droits d'auteur :

Formats disponibles

Bootstrap

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Bootstrap

Transféré par

Droits d'auteur :

Formats disponibles

WEB DESIGNER UI/UX - Approche développement frontend

Introduction à Bootstrap à travers 15 exemples

Table des matières

1. Ajoute une nouvelle colonne :

2. Structure la nouvelle section :

4. Stylise la nouvelle section :

Personnaliser les barres de progression pour les rendre visuellement attrayantes et

<div class="container"> La classe embed-responsive-16by9

Intégrer une carte Google Maps de manière responsive

Afficher une image de fond dans un composant carte de bootstrap

<link rel="stylesheet" href="css/bootstrap.css">

<div class="toast-container position-fixed bottom-0 end-0 p-3">

Modifiez le JavaScript pour inclure la récupération de l'heure actuelle.

<link rel="stylesheet" href="css/bootstrap.css">

1. Créez un fichier HTML de base.

<link rel="stylesheet" href="css/bootstrap.css">

Afficher des « boîtes » visibles uniquement sur petit écran

Vous aimerez peut-être aussi