Les images dans Bootstrap

Les images dans Bootstrap 4

  1. Objectifs

    • Etre capable de travailler avec les images dans Bootstrap






  2. Présentation

    • Bootstrap fournit des classes pouvant être utilisées lors de l’utilisation de l’élément <img>.
    • Les images ont généralement une expansion naturelle. Sur de grands écrans, cela n’est pas critique, cependant montrés sur de petits appareils, ils peuvent quitter la zone de visualisation. Avec .img-fluid, vous pouvez présenter de meilleures images.
  3. Images responsives

    • Les images dans Bootstrap sont réactives avec .img-fluid sont appliqués à l’image pour qu’elle soit redimensionnée avec l’élément parent. Cela garantit que l’image est adaptée à l’élément parent.
    • Cette classe applique trois actions:
      • max-width: 100%
      • height: Auto
      • display: Block
  4. Coins arrondis et Thumbnails

    • Vous pouvez utiliser Bootstrap pour rendre des images avec des coins arrondis ou un cercle.
    • Ceci est réalisé avec les classes .rounded-* d’utilitaires.
    • Les classes d’utilitaires peuvent être appliquées à n’importe quel élément (pas seulement aux images).
    • La classe : .rounded correspondand aux styles css :
      • .rounded {
        border-radius: 0.25rem;
        }
    • Les classes de rayon de bordure sont:
      • rounded
      • rounded-top:Arrondir le haut
      • rounded-right:Arrondir le haut du côté droit
      • rounded-bottom:Arrondir le haut et le bas
      • rounded-left:Arrondir le haut du côté gauche
      • rounded-circle:border-radius: 50%;
      • rounded-0
    • Prenons une image, arrondissons ses angles avec la classe .rounded et voyons le résultat.
    • <div class="container">
                <div class="row">
                  <div class="col">
        </br>
          <img src="image.png" alt="..." class="rounded mb-0">
          <img src="image.png" alt="..." class="rounded-top">
          <img src="image.png" alt="..." class="rounded-right">
          <img src="image.png" alt="..." class="rounded-bottom">
          <img src="image.png" alt="..." class="rounded-left">
          <img src="image.png" alt="..." class="rounded-circle">
          <img src="image.png" alt="..." class="rounded-pill">
          <img src="image.png" alt="..." class="rounded-0">
      </div>
      </div>
      </div>
    • Ce qui nous donne:
  5. Alignement des images

    1. Alignement vertical des images
      • Modifier facilement l’alignement vertical des éléments de cellule en ligne, bloc en ligne, tableau en ligne et tableau.
      • Alignement des images à gauche ou à droite
      • Classe : .float-right alignement à droite.
        Classe : .float-left alignement à gauche.

        <div class="container">
                  <div class="row">
                    <div class="col">
          </br>
        <img class="float-right" src="image.png" alt="...">
        <img class="float-left" src="image.png" alt="...">
        </div>
        </div>
        </div>
      • Si vous désirez un positionnement différent en fonction des résolutions d’écran vous pouvez bien rajouter les classes responsives comme ceci :
      • .float-left,.float-right,.float-none,.float-sm-left,.float-sm-right,.float-sm-none,.float-md-left,.float-md-right,.float-md-none,.float-lg-left,.float-lg-right,.float-lg-none,.float-xl-left,.float-xl-right,.float-xl-none

    2. Alignement horizontal des images
      • Centrer verticalement en utilisant des marges automatiques
      • <div class="row h-100">
            <div class="col-sm-12 my-auto">
                <div class="card card-block w-25">Card</div>
            </div>
        </div>
      • my-auto: représente les marges sur l’axe des y vertical et équivaut à:
      • margin-top: auto; et margin-bottom: auto;

      • Centrer verticalement en utilisant Flexbox
      • Centrer verticalement à l’aide des utilitaires d’affichage



Abonnez vous à notre chaîne YouTube gratuitement