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>
The .rounded-circle class shapes the image to a circle:
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>
The .img-thumbnail class creates a thumbnail of the image:
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>
Use the float classes to float the image to the left or to the right:
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>
Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the image:
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>
The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):
LEAVE A COMMENT