Hvordan får jeg et bilde avrundet i Bootstrap 5?

Bootstrap 5, den nyeste versjonen, gir mange avanserte funksjoner for å designe responsive nettsteder. Bildene er de populære komponentene for å legge til visuell appell til applikasjonene. I Bootstrap 5 kan flere klasser brukes til å gi forskjellige former til bilder. Mer spesifikt kan du runde ønsket kant av bildet ved å bruke spesifikke bootstrap -klasser som "avrundet”,“avrundet", og mange flere.

Denne oppskrivningen vil beskrive hvordan du lager det avrundede bildet i Bootstrap 5.

Hvordan lage et bilde avrundet i bootstrap 5?

Bootstrap 5 tilbyr mange klasser som hjelper til med å gjøre elementets kanter rundt. Disse er listet opp nedenfor:

• • “avrundet”: Denne klassen lager hele bildet rundt.
  • “avrundet”: Denne klassen gir den runde pillen form til elementet.
  • “avrundet sirkel”: Dette bildet er avrundet til en sirkel.
  • “avrundet topp”: Denne klassen runder bildet fra toppen.
  • “avrundet start”: Denne klassen runder bildet fra starten av.
  • “avrundet”: Denne klassen runder bildet fra slutten.
  • “avrundet bunn”: Denne klassen runder bildet fra bunnen.

La oss nå diskutere effekten av den vervet bootstrap.

Eksempel 1: Hvordan lage en bilderunde i Bootstrap 5?

“avrundet sirkel”Klasse brukes til å lage det sirkelformede bildet. For å gjøre det, legg til “”Tag og tilordne den en klasse”avrundet sirkel”I HTML -filen din:

Produksjon

Eksempel 2: Hvordan lage en bilde rundt pille i bootstrap 5?

“avrundet”Klasse er spesifisert med bildet for å gi en rund pilleform til den.

For dette formålet, implementer klassen “avrundet”Som nevnt i koden nedenfor:

Produksjon

Slik kan du gjøre bildene rundt i Bootstrap 5.

Konklusjon

For å lage bilder rundt i Bootstrap 5, kan flere klasser brukes. Disse klassene inkluderer "avrundet”,“avrundet start”,“avrundet topp”,“avrundet bunn", og mange flere. Spesifikt, for å gjøre hele bildet til en sirkulær form, "avrundet sirkel”Klasse brukes. For å gjøre det til en avrundet pilleform, “avrundet”Klasse brukes. Denne oppskrivningen har forklart hvordan du lager et bilde avrundet i Bootstrap 5.