BOOTSTRAP 4 IMAGES
Bootstrap can make images responsive, so that when device size varies images adjust its size to best fit in the device. Bootstrap makes sure that the image could never become larger than their parent element.




Bootstrap Responsive Image
Images make websites more attractive and informative, so you need to place images properly on the page.
Images have some fixed width and height and overflow when not styled properly. Bootstrap contains many predefined classes using which we can get any desired results.
Use img-fluid
class to make images responsive. After using this class image adjust its size according to different devices
The Bootstrap's img-fluid
class properties are:
max-width
: 100%;height
: auto;
Exmple: Responsive Image
Bootstrap Rounded Corners Image
To make images have rounded cornors use rounded
class. If you want to make an image responsive, you must use img-fluid
class explicitly with it.
The Bootstrap's rounded
class property is:
border-radius
: 0.25rem !important;
Exmple: Rounded cornor Image
Bootstrap Circle Image
To make images circular use rounded-circle
class. If you want to make image responsive, you must use img-fluid
class explicitly with it.
The Bootstrap's rounded-circle
class property is:
border-radius
: 50% !important;
Exmple: Circle Image
Bootstrap Thumbnail Image
The .img-thumbnail
class makes the image look like thumbnail by creating a border around the image.
The Bootstrap's .img-thumbnail
class properties are:
padding
: 0.25rem;background-color
: #fff; (white)border
: 1px solid #dee2e6;border-radius
: 0.25rem;max-width
: 100%;height
: auto;
Exmple: Thumbnail
Bootstrap Align Image
To align image left use .float-left
class and to align image right use .float-right
class.


Exmple: Align Image
Bootstrap Align Image Center
To align image centre use mx-auto
with d-block
together.
mx-auto
sets margin-left and margin-right to auto, while d-block
class makes image element to a block element (by default image is an inline element).
CSS properties of used classes are as follows:
- mx-auto :
margin-left
: auto !important;margin-right
: auto !important;
- d-block :
display
: block !important;
Exmple: Align Image center
Another way to align image center is using image inside a 'div' element with class text-center
.
Exmple: Align Image center
- To make image responsive use
.img-fluid
class on image. - To make image rounded use
.rounded
class. - For circular image use
.rounded-circle
class. - To make an image look like thumbnail use
.img-thumbnail
class. - To align image centre use
.mx-auto
and.d-block
together. - To align image center you can also put an image in a div element with class
.text-center
.