Bootstrap 4 Tutorial

BS4 Introduction

How to use Bootstrap

BS4 Layout

BS4 Grid System

BS4 Typography

BS4 Colors

BS4 Table

BS4 Images

BS4 Jumbotron

BS4 Alerts

BS4 Buttons

BS4 Button Group

BS4 Badges

BS4 Progress Bar

BS4 Pagination

BS4 Breadcrumb

BS4 Card

BS4 Collapse

BS4 Nav Tabs Pills

BS4 Navbar

BS4 Tooltip

BS4 Carousel

BS4 Scrollspy

BS4 Forms

BS4 Form Validation

BS4 Form Custom

Page Stats

Visitor: 386

Bootstrap 4 Images

Example 1: Create Rounded corners of the image using "rounded" class

<img src="pair-dogs.jpg" class="rounded">
Bootstrap Image Rounded class

Example 2: Create circular Image using "rounded-circle" class

<img src="panda.jpg" class="rounded-circle">
Bootstrap Image circular class

Example 3: Create Thumbnail Image using "img-thumbnail" class

<img src="tiger.jpg" class="img-thumbnail">
Bootstrap Image thumbnail class

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.

Example 4: 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)

Updated: 08-Dec-21