Plan du cours
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
Après
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%;
}
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.
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;
}
Alignement des images
Alignement des images à gauche ou à droite
Classe : .float-left alignement à gauche.
Classe : .float-left alignement à gauche.
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:
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;
}
*note bootstrap 3 utilisait la classe .center-block
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 :
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.
Attention néanmoins le choix de text-center appliquera un centrage à tous les éléments se trouvant dans le div, c’est pourquoi parfois le choix numéro 1
(d-block mx-auto) convient mieux, car lui ne s’appliquera qu’à l’image.
Exemple méthode 1 (type block ) :
Le centrage ne s’applique pas dans cet exemple au paragraphe
Exemple méthode 2 (type inline ) :
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.
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à.
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
img {
margin-top: 50px;
}
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
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