Alignement avec Bootstrap
Sommaire
- 1- Objectifs
- 2- Présentation
- 3- Alignement Vertical d’un contenu avec Bootstrap
- 3.1- Centrer verticalement en utilisant les marges automatiques
- 3.2- align-items
- 4- Aligner individuellement avec Bootstrap
- 5- Aligner horizontalement avec Bootstrap (les colonnes)
- 6- align-items, justify-content et align-content
- 6.1.1- Sommaire du cours Bootstrap
Alignement avec Bootstrap
-
Objectifs
- Etre capable d’utiliser la grille de Bootstrap
-
Présentation
- Le framework Bootstrap dans sa version 4 utilise le modèle des flexbox afin de faciliter la disposition des éléments dans la page.
- Grâce à quelques classes CSS fournis par le framework, on peut centrer à la fois verticalement et horizontalement un élément dans son élément parent.
-
Alignement Vertical d’un contenu avec Bootstrap
- Pour aligner les éléments verticalement, Bootstrap 4 propose différentes techniques, telles que:
- Marges automatiques combinées avec Flexbox,(Centrer verticalement en utilisant les marges automatiques)
- Utilitaires Flex
- Utilitaires d’alignement vertical permettant de modifier l’alignement vertical des éléments de cellule en ligne, inline-block, inline-table et table, combinés à des utilitaires d’affichage
- La dernière version de Bootstrap est fournie avec des classes par défaut pour faciliter considérablement le centrage vertical de votre contenu.
- Les principales classes à surveiller sont les classes "
d-flex" et "align-items-center". -
Centrer verticalement en utilisant les marges automatiques
- L’un des moyens de centrer verticalement consiste à utiliser
my-autoqui permet de centrer l’élément dans son conteneur. my-autoreprésente les marges sur l’axe des y vertical et est équivalent à:-
align-items
- La propriété
align-itemspermet d’aligner les éléments flexibles d’une ligne ou d’une colonne flexible. - On dispose de 3 classes pour aligner verticalement au niveau d’une ligne
align-items-start: c’est la valeur par défautalign-items-center: alignement au milieualign-items-end: alignement en bas- Exemple
- Résultat
-
Aligner individuellement avec Bootstrap
align-selfpermet d’aligner les éléments flexibles sur une même rangée.- Avec
align-selfOn peut également traiter chaque élément individuellement en utilisant: align-self-start: c’est la valeur par défaut et aligne les éléments au début du conteneur Flexalign-self-center:est responsable du centrage de l’article Flex dans son conteneur.align-self-end: aligne les éléments à la fin du conteneur flexible- Exemple:
- Résultat:
-
Aligner horizontalement avec Bootstrap (les colonnes)
- Les classes d’utilitaires Bootstrap permettant d’appliquer des
justify-contentvaleurs aux éléments sont les suivantes: justify-content-start: positionne la colonne à gauchejustify-content-center: positionne la colonne au centrejustify-content-end: positionne la colonne à droitejustify-content-around: distribue l’espace de façon équitable. Tous les objets ont le même espace de chaque côté.justify-content-between: dispose le premier objet au début de l’axe et le dernier à la fin de l’axe.- Exemple:
- Résultat:
-
align-items, justify-content et align-content
margin-top: auto;
margin-bottom: auto;
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Bonjour tout le monde!</title>
<style>
.rowCouleur{
height: 120px;
background-color: rgba(255,0,0,0.1);
border: 2px solid rgba(245, 8, 8, 0.5);
}
.colCouleur{
height: 40px;
background-color: rgba(255,0,0,0.1);
border: 2px solid blue;
border-radius: 6px;
}
</style>
</head>
<body>
<div class="container">
<div class="row align-items-start rowCouleur" >
<div class="col colCouleur">
align-items-start
</div>
<div class="col colCouleur">
align-items-start
</div>
</div>
<p></p>
<div class="row align-items-center rowCouleur">
<div class="col colCouleur">
align-items-center
</div>
<div class="col colCouleur">
align-items-center
</div>
</div>
<p></p>
<div class="row align-items-end rowCouleur">
<div class="col colCouleur">
align-items-end
</div>
<div class="col colCouleur">
align-items-end
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Bonjour tout le monde!</title>
<style>
.rowCouleur{
height: 120px;
background-color: rgba(255,0,0,0.1);
border: 2px solid rgba(245, 8, 8, 0.5);
}
.colCouleur{
height: 40px;
background-color: rgba(255,0,0,0.1);
border: 2px solid blue;
border-radius: 6px;
}
</style>
</head>
<body>
<div class="container">
<div class="row align-items-start rowCouleur" >
<div class="col colCouleur align-self-start">
align-self-start
</div>
<div class="col colCouleur align-self-center">
align-self-center
</div>
<div class="col colCouleur align-self-end">
align-self-end
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
La propriété
align-itemspermet d’aligner les éléments flexibles d’une ligne ou d’une colonne flexible. Elle fonctionne de la même façon quejustify-contentmais dans la direction orthogonale. Cette propriété définit l’alignement des objets à l’intérieure de la ligne ou de la ligne flexible courante alors quealign-contentdéfinit l’alignement des lignes/colonnes entre elles.
