Javatpoint Logo
Javatpoint Logo

Bootstrap Images

Bootstrap supports for images. There are three classes in Bootstrap that can be used to apply some simple style to the images.

The following classes add style to the images:

Classes Uses
.img-rounded It adds border-radius:6px to give the image rounded corners.
.img-circle It makes the entire image round by adding border-radius:500px.
.img-thumbnail It adds a bit of padding and a gray border.

Bootstrap Image-rounded Example

The class .img-rounded is used to add rounded corners to an image ( IE8 does not support rounded corners).

Example:

Test it Now

Bootstrap Image-circle Example

The class .img-circle is used to shape the image to a circle (IE8 does not support rounded corners).

Example:

Test it Now

Bootstrap Thumbnail Image Example

The class .img-thumbnail is used to shape an image to a thumbnail.

Example:

Test it Now

Bootstrap Responsive images

The responsive images can adjust themselves automatically to fit the size of screen. You can create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale nicely to the parent element.

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

Example:

Test it Now

Bootstrap Responsive Videos / Embeds

In Bootstrap, you can also add videos and scale them properly on any devices. The class .embed-responsive-item is used to create a responsive video. Class can be applied directly to <iframe>, <embed>, <video>, and <object> elements.

Let's take an example:

In the following example, we add .embed-responsive-item class to an <iframe> tag to make the video responsive. It can scale the video nicely according to the parent element.

Example:

Test it Now

Bootstrap4 Images

Aligning images are used to float an image to the right with the .float-right class or to the left with .float-left.

Example:

Test it Now




Help Others, Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA