Utiliser Bootstrap

Pour utiliser BootStrap il vous faudra donc tout d’abord télécharger les fichiers de CSS :

Voici le lien : https://getbootstrap.com/docs/4.5/getting-started/download/


1 ère étape : Les containers

Tout d’abord il va falloir utiliser le container qui va vous permettre de créer le bloc principal de votre page, on doit donc l’appelé grâce à une class.


2 ème étape : Les Row

Celle-ci sera donc l’étape qui va vous permettre de bien placer les éléments de votre code sur le site, là les saluts vont se mettre sur une ligne


3ème étape : Les Col 

Cette classe va donc être utile pour placer votre contenu à l’endroit voulu. Par exemple sur l’exemple au-dessus les saluts sont collé et en ligne.

Ici on utilisera les col.

En effet quand vous utilisé les col, votre page est donc découpé en 12 colonnes, comme ceci :

Mais si vous utiliser un col-4 par exemple vous fusionnerai 4 colonnes entre elles comme ci-dessous :

Si vous utiliser un col même sur la même ligne (dans le même row) cela collera les 2 comme ceci :


Le responsive avec Bootstrap

Les classe ’col’ de Bootstrap peuvent être compléter avec des sigles permettant de définir la taille voulue en fonction de la taille de la fenêtre sur laquelle fonctionne votre site.

Extra-small small medium large Extra-large
Col-xs Col-sm Col-md Col-lg Col-xl

Exemple :

Les div sont réglés en col-lg-5 et col-lg-7 ce qui veut dire que lorsque la fenêtre de votre site sera en format large les Div. s’aligneront de cette façon.

Mais lorsque vous passerez à fenêtre en Small, extra-Small, les div se réaligneront pour passer en format col-xs-12 et col-xs-12 et donc elle se positionneront l’une en dessous de l’autre.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *