Bootstrap 4 afbeeldingen
Bootstrap 4 beeldvormen
Afgeronde hoeken:
Cirkel:
Miniatuur:
Afgeronde hoeken
De .roundedklasse voegt afgeronde hoeken toe aan een afbeelding:
Voorbeeld
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Cirkel
De .rounded-circleklas vormt de afbeelding tot een cirkel:
Voorbeeld
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
Miniatuur
De .img-thumbnailklasse vormt de afbeelding tot een miniatuur (omzoomd):
Voorbeeld
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Afbeeldingen uitlijnen
Zweef een afbeelding naar rechts met de .float-rightklasse of naar links met .float-left:
Voorbeeld
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
Gecentreerde afbeelding
Centreer een afbeelding door de hulpprogrammaklassen .mx-auto(margin:auto) en .d-block(display:block) aan de afbeelding toe te voegen:
Voorbeeld
<img src="paris.jpg" class="mx-auto d-block">
Responsieve afbeeldingen
Afbeeldingen zijn er in alle maten. Dus ook schermen. Responsieve afbeeldingen passen zich automatisch aan de grootte van het scherm aan.
Maak responsieve afbeeldingen door een .img-fluidklasse aan de <img>tag toe te voegen. De afbeelding wordt dan mooi geschaald naar het bovenliggende element.
De .img-fluidklasse is van toepassing max-width: 100%;en
height: auto;op de afbeelding:
Voorbeeld
<img class="img-fluid" src="img_chania.jpg" alt="Chania">