2019

Bootstrap 4: Images

bootstrap 4

Plan du cours

Dans cette leçon, nous allons voir tout ce qui a trait aux images dans Bootstrap 4. Bootstrap fournit des classes pouvant être utilisées avec la balise <img> (et tout un tas d’autres éléments d’ailleurs, pas seulement les images) que nous allons voir ensemble.

Les classes utilisées :

  • .rounded
  • .rounded-circle
  • .img-thumbnail
  • .float-right / .float-left
  • .d-block (display:block)
  • .mx-auto (margin:auto)
  • .img-fluid

Arrondir les coins d’une image

Classe : .rounded correspondand aux styles css :

.rounded {
border-radius: 0.25rem;
}

Prenons une image, arrondissons ses angles avec la classe .rounded et voyons le résultat.

Avant
Bootstrap image coin arrondi
Après
Bootstrap image coin arrondi

Notez que vous pouvez aussi uniquement :

Arrondir le haut avec :
.rounded-top

Arrondir le haut du côté droit avec:
.rounded-right

Arrondir le haut du côté gauche avec:
.rounded-left

Arrondir le haut et le bas avec:
.rounded-bottom

Arrondir toute l’image

Classe : .rounded-circle correspondand aux styles css :

.rounded-circle {
border-radius: 50%;
}

.rounded-circle
.rounded-circle

Image en vignette

Classe : .img-thumbnail correspondand aux styles css :

.img-thumbnail {
padding: 0.25rem;
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: 0.25rem;
max-width: 100%;
height: auto;
}

Cette classe rajoute un padding, une couleur de fond et une bordure.

.img-thumbnail
.img-thumbnail

Image responsive (flexible)

Pour faire en sorte que les images s’adaptent automatiquement à la taille de l’écran nous allons utiliser la classe suivante :

Classe : .img-fluid correspondand aux styles css :

.img-fluid {
max-width: 100%;
height: auto;
}

img-fluid

Caroussel

Pour créer un carrousel d’image reportez-vous à cette leçon bootstrap 4 carrousel

Alignement des images

Alignement des images à gauche ou à droite

Classe : .float-left alignement à gauche.
Classe : .float-left alignement à gauche.

float-right
float-left

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-sm-left, .float-md-left, .float-lg-left, .float-xl-left.
.float-right, .float-sm-right, .float-md-right, .float-lg-right, .float-xl-right

Vous pouvez aussi supprimer un flottant avec la classe .float-none

Exemple:

float-none

Alignement horizontal des images

3 choix possibles :

1 : Image de type block .

Oui vous allez dire que la balise img est de type inline et vous avez raison. Pour la centrer à la manière d’une balise de type block, on va donc devoir la transformer en type block.

Classe utilisée : .d-block correspondant aux styles css :


.d-block {
display: block;
}

A partir de là, il ne nous reste plus qu’à la centrer à la manière d’un block.

Classe utilisée : .mx-auto correspondant aux styles css :

.mx-auto {
margin-right: auto;
}

margin: auto;
*La classe border rajoute une bordure au conteneur, ce qui permet de mieux illustrer le centrage.
*note bootstrap 3 utilisait la classe .center-block
mx-auto
2 : Image de type inline (par défaut)

Si vous ne voulez pas transformer votre image en type block, vous devez la mettre dans un div qui lui est de type block, puis centrez l’image de la même manière que l’on centre un élément à l’intérieur de son block.

Classe utilisée : .text-center correspondant aux styles css :

.text-center {
text-align: center;
}

Cette fois-ci, nous n’allons pas appliquer la classe à la balise img, mais à la balise div, comme ceci :

text-center

Et vous pouvez vous apercevoir que le résultat est le même.

Vous pouvez rajouter les classes responsives comme ceci :
.text-center, .text-sm-center, .text-md-center, .text-lg-center, and .text-xl-center.

Vous pouvez aussi aligner votre image autrement qu’au centre avec les classes ci-dessous :
.text-left, .text-right.

Exemple méthode 1 (type block ) :

Bootstrap 4 d-block mx-auto
d-block mx-auto

Le centrage ne s’applique pas dans cet exemple au paragraphe

Exemple méthode 2 (type inline ) :

text-center
text-center

Là par contre le centrage s’applique aussi au paragraphe.

Vous devrez choisir l’une des deux méthodes en fonction des cas.

3 : Avec flexbox.

Je rappelle que flexbox est le système css le plus abouti pour la mise en page des éléments sur une page web.
La grande révolution de bootstrap 4 (par rapport aux versions précédentes) et qu’il est justement basé sur flexbox.
Pour ceux qui ne connaitraient pas encre flexbox, vous pouvez retrouver notre tutoriel ici : Flexbox.

Pour aligner horizontalement notre image avec le système flexbox nous allons placer notre image dans un div et utiliser sur ce dernier et non sur l’image les classes suivantes :

d-flex : qui siginifie dipslay: flex; et qui permet de déclarer une flexbox (boite modulable).

Justify-content : qui permet d’aligner notre élément (ici notre image) comme on le désire.

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around

Nous reviendrons sur ces différentes classes lors de la leçon bootstrap 4 flex.

Pour ici, nous allons nous contenter de voir un exemple avec .justify-content-center,
qui doit nous permettre de centrer une image horizontalement.

.justify-content-center
.justify-content-center

Notre image est centrée.

Fonctionne également avec les classes responsives.
Ex : .justify-content-md-center

*Notez que si vous rajouter un élément comme un paragraphe par exemple dans le même container (div) que celui de l’image, celui-ci se placera à la droite de l’image et décalera cette dernière vers la gauche.
Cette méthode ne marchera donc pas dans ce cas-là.

.justify-content-md-center
.justify-content-md-center

Si vous ne souhaitez aligner qu’un seul élément dans un conteneur en comprenant plusieurs, je vous conseille la première méthode (type block) .

Alignement vertical des images

Pour aligner une image verticalement là aussi il existe plusieurs méthodes avec bootstrap 4.

Methode 1 : Margin

La première, un grand classique, définir une hauteur à un conteneur et utiliser margin-top sur l’image pour la centrer

margin-top

img {
margin-top: 50px;
}

margin-top
Methode 2 : align-items avec d-flex (flexbox) appliqué au conteneur.

Classe utilisée :

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch

.align-items
.align-items

Exemple en responsive :
.align-items-lg-center

Pour aligner plusieurs images se trouvant dans un même conteneur, nous allons appliquer la classe d-flex sur le conteneur et les classes ci-dessous sur l’image elle-même :

.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch

Bootstrap 4 align-self-center
Bootstrap 4 align-self-end

Laisser un commentaire