Bootstrap 4- prente
Bootstrap 4 beeldvorms
Afgeronde Hoeke:
Sirkel:
Kleinkiekie:
Afgeronde Hoeke
Die .roundedklas voeg afgeronde hoeke by 'n prent:
Voorbeeld
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Sirkel
Die .rounded-circleklas vorm die beeld na 'n sirkel:
Voorbeeld
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
Kleinkiekie
Die .img-thumbnailklas vorm die prent na 'n duimnael (begrens):
Voorbeeld
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Belyn beelde
Swaai 'n prent na regs met die .float-rightklas of na links met .float-left:
Voorbeeld
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
Gesentreerde beeld
Sentreer 'n prent deur die nutsklasse .mx-auto(marge:auto) en .d-block(display:block) by die prent by te voeg:
Voorbeeld
<img src="paris.jpg" class="mx-auto d-block">
Responsiewe beelde
Prente kom in alle groottes. So ook skerms. Responsiewe beelde pas outomaties aan om by die grootte van die skerm te pas.
Skep responsiewe beelde deur 'n .img-fluidklas by die <img>merker te voeg. Die prent sal dan mooi skaal na die ouerelement.
Die .img-fluidklas is van toepassing max-width: 100%;en
height: auto;op die beeld:
Voorbeeld
<img class="img-fluid" src="img_chania.jpg" alt="Chania">