A shortened version of weblog.

A shortened version of weblog.

Bootstrap 5 Images

  • Programming
  • 19 May 2022
  • 359 Views
  • Sathiyamoorthy V

1. Rounded Corners

The .rounded class adds rounded corners to an image

<div class="container mt-3">
<h2>Circle</h2>
<p>The .rounded-circle class shapes the image to a circle:</p>
<img src="bootstrap-tutorial.png" class="rounded-circle" alt="Bootstarp Tutorial" width="300" height="280">
</div>

Output

Circle

The .rounded-circle class shapes the image to a circle:

Bootstarp Tutorial

2. Thumbnail

The .img-thumbnail class shapes the image to a thumbnail (bordered)

<div class="container mt-3">
<h2>Thumbnaillt/h2>
<p>The .img-thumbnail class creates a thumbnail of the image:</p>
<img src="bootstrap-tutorial.png" class="img-thumbnail" alt="Bootstarp Tutorial" width="300" height="300">
</div>

Output

Thumbnail

The .img-thumbnail class creates a thumbnail of the image:

Bootstarp Tutorial

3. Aligning Images

Float an image to the left with the .float-start class or to the right with .float-end

<div class="container mt-3">
<h2>Aligning images</h2>
<p>Use the float classes to float the image to the left or to the right:</p>
<img src="bootstrap-tutorial.png" class="float-start" alt="Bootstarp Tutorial" width="300" height="175">
<img src="bootstrap-tutorial.png" class="float-end" alt="Bootstarp Tutorial" width="300" height="175">
</div>

Output

Aligning images

Use the float classes to float the image to the left or to the right:

Bootstarp Tutorial                     Bootstarp Tutorial

4. Centered Image

Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the image

<div class="container mt-3">
<h2>Centered Image</h2>
<p>Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the image:</p>
<img src="bootstrap-tutorial.png" class="mx-auto d-block" style="width:50%">
</div>

Output

Centered Image

Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the image:


5. Responsive Images

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

Create responsive images by adding an .img-fluid class to the <img> tag. The image will then scale nicely to the parent element.

The .img-fluid class applies max-width: 100%; and height: auto; to the image

<div class="container mt-3">
<h2>Image</h2>
<p>The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img class="img-fluid" src="bootstrap-tutorial.png" alt="Bootstrap Tutorial" width="1100" height="500">
</div>

Output

Image

The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):

Bootstrap Tutorial

RELATED POST

19 May 2022   |   Programming
Bootstrap 5 Colors
Read More
12 May 2022   |   Programming
Bootstrap 5 Containers
Read More
11 May 2022   |   Programming
Bootstrap 5 Basic Page Example
Read More
20 May 2022   |   Programming
PHP Variables
Read More
09 June 2022   |   Programming
PHP Connect to MySQL
Read More
10 June 2022   |   Programming
PHP Create a MySQL Database
Read More
Bootstrap 5 Images
https://blogbyte.in/blog-details/?cid=2&pid=26

LEAVE A COMMENT

+