Aligner les images IMAGES:Alignement

Les classes .float-start et .float-end permettent d’aligner à droite et à gauche, les images dans une même colonne d’une grille.

Voici le code de cet exemple simple :

<div class="row"> 
   <div class="col"> 
       <img src="dorsoduro-01.jpg" class="float-start" alt="Dorsoduro à Venise"> 
       <img src="dorsoduro-02.jpg" class="float-end" alt="Dorsoduro à Venise"> 
   </div> 
</div> 

Voici l’affichage obtenu sur un écran de taille moyenne :

Voici les règles CSS des classes utilisées :

.float-start { 
    float: left !important; 
} 
.float-end { 
    float: right !important; 
} 

Vous pouvez centrer une image avec la classe .text-center appliquée à la colonne <div class="col text-center"> :

<div class="row"> 
   <div class="col text-center"> 
        <img src="dorsoduro-03.jpg" class="rounded" 
alt="Dorsoduro à Venise"> 
   </div> 
</div> 

Voici l’affichage obtenu sur un écran de taille moyenne :

Voici la règle CSS de la classe...