nous contenter d’ajouter des attributs class relatifs aux sélecteurs de classe définis dans le fichier

Bootstrap CSS afin de leur appliquer les styles CSS liés.

« mobile first », ce qui signifie que les règles CSS sont créées pour les affichages mobiles. On
utilise ensuite un système de « breakpoints » (points d’arrêt) qui reposent sur l’utilisation de règles
@media pour définir les affichages sur les écrans plus grands

Comme vous pouvez le voir, ces règles @media utilisent min-width, ce qui signifient qu’elles
seront appliquées à partir d’une taille minimale d’écran ou autrement dit pour des écrans plus
grands qu’une certaine taille..
Pour nous permettre de définir les comportements de nos éléments en fonction des tailles d’écran et
créer ainsi des design responsive personnalisés, Bootstrap met bien évidemment à notre disposition
de nombreuses classes qui vont nous permettre de définir un certain comportement pour des
éléments pour une taille d’écran définie.
Ces classes vont être reconnaissables grâce à l’emploi des lettres sm, md, lg et xl dans le nom de
la classe.
Sm : small device mn wisth 576px phones
md : medium device minwidth 768px tablet
ld : large device min width 992 px exp desktop
xl : extra large desktops min width 1200px
A noter qu’il existe également un cinquième breakpoint représenté par les lettres xs qui correspond
à l’affichage sur mobile (tailles d’écrans inférieures à 576px). Ce breakpoint est très peu utilisé car
Bootstrap 4 a été développé avec l’idée du mobile first, ce qui signifie que xs est la taille par défaut
et correspond donc aux classes « de base » (sans marquage « sm », « md », etc. supplémentaire).
Bootstrap fournit différents composants, c’est-à-dire différents ensembles de code déjà prêt à
l’emploi et qui nous permettent d’afficher des fenêtres modales, des barres de navigation, etc. sans
avoir à écrire une ligne de code.
Bootstrap utilise la propriété z-index pour définir quel composant doit apparaitre au-dessus de
quel autre dans le cas où on en insèrerait plusieurs dans une même page.
De plus, une valeur de z-index est également définie en fonction des états des éléments en cas de
chevauchement de ceux-ci :
• 1 par défaut
• 2 pour hover
• 3 pour active