Alignement avec Bootstrap

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>
      • Résultat
      • Alignement avec Bootstrap

  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>
      • Résultat:
  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.
    • Exemple:
    • Résultat:
  6. align-items, justify-content et align-content

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




Abonnez vous à notre chaîne YouTube gratuitement