Gambar Bootstrap 5

Course Recommendations:

Image Shape

Rounded Corners .rounded

Example

Class adds rounded corners to the image:

Try It Yourself

<img src="flower.jpg" class="rounded" alt="Flower">

Circle .rounded-circle

Example

Class shapes the image into a circle:

Try It Yourself

<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">

Thumbnail .img-thumbnail

Example

Class shapes the image into a thumbnail (with border):

Try It Yourself

<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">

Align Images .float-start Class floats the image to the left, or use .float-end Float to the Right:

Example

<img src="tulip.jpg" class="float-start">
<img src="tulip.jpg" class="float-end">

Try It Yourself

Centered Image

To center the image, we added utility classes to the image .mx-auto (margin:auto) and .d-block (display:block):

Example

<img src="tulip.jpg" class="mx-auto d-block">

Try It Yourself

Responsive Images

Images come in various sizes. So do screens. Responsive images will automatically adjust to fit the screen size.

By placing .img-fluid Add class to <img> Use the tag to create responsive images. Then the image will be scaled well within the parent element.

.img-fluid Class for Image Application max-width: 100%; and height: auto; :

Example

<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">

Try It Yourself