Ici je t’explique comment télécharger Boostrap 4 et l’installer, vous pouvez aussi l’héberger Bootstrap 4 vous-même, accédez au site https://getbootstrap.com/ et suivez les instructions.
Etape 1 Créer votre page HTML
Bootstrap 4 utilise des éléments HTML et des propriétés CSS qui nécessitent le doctype HTML5. Incluez toujours le doctype HTML5 au début de la page, ainsi que l’attribut lang et le jeu de caractères correct:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
</head>
</html>Etape 2 insérer le code viewport
Bootstrap 4 est conçu pour être réactif aux appareils mobiles. Les styles Mobile-first font partie du cadre de base. Pour garantir un rendu et un zoom tactile corrects, ajoutez la balise suivante à l’intérieur de l’élément :
<meta name="viewport" content="width=device-width, initial-scale=1">
Explications :
- La partie width = device-width définit la largeur de la page pour suivre la largeur de l’écran de l’appareil (qui varie en fonction de l’appareil).
- La partie échelle initiale = 1 définit le niveau de zoom initial lorsque la page est chargée pour la première fois par le navigateur.
Mon conseil : on ne change rien, on laisse par défaut
Etape 3 : J’ajoute les liens externes des librairies
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Résultat final avec tout et fonctionnel :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap exemple de page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Des colonnes responsives</h1>
<p>Réduis ton navigateur ou essaie en mode responsive via la console F12</p>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
</div>
</div>
</body>
</html>