Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Image Shapes

Rounded Corners
Mumbai CST
Circle
img-circle
Thumbnail
img-thumbnail

Rounded Corner Images

The .rounded class adds rounded corners to an image as seen in the following example:

Run code

Circle Images

The .rounded-circle class shapes the image to a circle as seen in the following example:

Run code

Thumbnail Images

The .img-thumbnail class gives an image a rounded 1px border appearance as seen in the following example:

Run code

Aligning Images

Float an image to the right with the .float-right class or to the left with .float-left class:

Run code

Centered Images

Center an image by adding the utility classes .mx-auto (margin-left and margin-right: auto) and .d-block (display:block) to the image:

Run code

Responsive Images

Responsive images automatically adjust to fit the size of the screen.

The .img-fluid class makes an image responsive. The image will then scale nicely to the parent element.

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

Run code

Creating a Thumbnail

The following example shows how to lay out images, videos, text, etc:

Thumbnail 1

Thumbnail label

Some sample text. Some sample text.

Thumbnail 2

Thumbnail label

Some sample text. Some sample text.

Thumbnail 3

Thumbnail label

Some sample text. Some sample text.

Run code

The <picture> Element

If you are using the <picture> element to specify multiple <source> elements for a specific <img>, make sure to add the .img-* classes to the <img> and not to the <picture> tag.

Run code

The <figure> Element

Anytime you need to display a piece of content—like an image with an optional caption, consider using a <figure> element.

Run code

Note: Images in figures have no explicit size, so be sure to add the .img-fluid class to your <img> to make it responsive.