Page Stats
Visitor: 657
Bootstrap 4 Images
Example 1: Create Rounded corners of the image using "rounded" class
<img src="pair-dogs.jpg" class="rounded">
Example 2: Create circular Image using "rounded-circle" class
<img src="panda.jpg" class="rounded-circle">
Example 3: Create Thumbnail Image using "img-thumbnail" class
<img src="tiger.jpg" class="img-thumbnail">
Responsive Images
You can create image as responsive which will automatically adjust according to the screen size. Responsive image class is ".img-fluid" which is added to img tag.
<img class="img-fluid" src="image-name.jpg">
To align image as vertically center
<img src="..." class="rounded mx-auto d-block" alt="..."> OR <div class="text-center"> <img src="..." class="rounded" alt="..."> </div>
Aligning Images - Float an image to the right with the float-right class or to the left with float-left class.
<img src="image-name.jpg" class="float-left"> <img src="image-name.jpg" class="float-right">
Image Gallery
You can also use Bootstrap's grid system alone with the thumbnail class to create an image gallery.
Responsive Video
You can also create Responsive video by adding an embed-responsive-item class to an <iframe>, <embed>, <video>, and <object> elements.
<div class="embed-responsive embed-responsive-16by9">
<video id="img1" controls class="embed-responsive-item">
<source src="Diving.mp4" type="video/mp4" />
</video>
</div>
Example 5: Responsive Video (Click to Enlarge)