Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
Bootstrap

Alignement avec Bootstrap

Un cours complet pour maîtriser Alignement avec Bootstrap.

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours
Sommaire du cours
historique de bootstrap
Présentation de bootstrap
Installation de Bootstrap
La Syntaxe de base de Bootstrap
Les bases de Bootstrap et template de démarrage
Le système de grille Bootstrap
La grille de Bootstrap en pratique
Exercices positionnement sur Grille Bootstrap
Alignement avec Bootstrap
TP la grille Bootstrap
Les classes pull et push
Typographie de Bootstrap
Les tableaux dans Bootstrap
Menus de navigation (Navbar)
Les barres d'outils standard Bootstrap
Autres catégories
News
Microsoft Office
Les cours de programmation
MOS
WordPress
Ressources pédagogiques
Voir tout le catalogue

  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.