Auteur Auteur

Alignement avec Bootstrap

  1. Objectifs

    • Etre capable d’utiliser la grille de Bootstrap

  2. 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.

  3. Alignement Vertical d’un contenu avec Bootstrap

    • Pour aligner les éléments verticalement, Bootstrap 4 propose différentes techniques, telles que:
      1. Marges automatiques combinées avec Flexbox,(Centrer verticalement en utilisant les marges automatiques)
      2. Utilitaires Flex
      3. 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-auto qui permet de centrer l’élément dans son conteneur.
      • my-auto représente les marges sur l’axe des y vertical et est équivalent à:

        • margin-top: auto;
        margin-bottom: auto;

    • align-items
      • La propriété align-items permet 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éfaut
        • align-items-center : alignement au milieu
        • align-items-end : alignement en bas
      • Exemple
        • 
    <!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>

  4. Aligner individuellement avec Bootstrap

    • align-self permet d’aligner les éléments flexibles sur une même rangée.
    • Avec align-self On 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 Flex
      • align-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:
          • <!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>

  5. Aligner horizontalement avec Bootstrap (les colonnes)

    • Les classes d’utilitaires Bootstrap permettant d’appliquer des justify-content valeurs aux éléments sont les suivantes:
      • justify-content-start : positionne la colonne à gauche
      • justify-content-center : positionne la colonne au centre
      • justify-content-end : positionne la colonne à droite
      • justify-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.
  6. Résultat:

  7. align-items, justify-content et align-content

      8. La propriété align-items permet d’aligner les éléments flexibles d’une ligne ou d’une colonne flexible. Elle fonctionne de la même façon que justify-content mais 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 que align-content définit l’alignement des lignes/colonnes entre elles.

Précédent
Suivant