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:
Bootstrap Image-circle Example
The class .img-circle is used to shape the image to a circle (IE8 does not support rounded corners).
Example:
Bootstrap Thumbnail Image Example
The class .img-thumbnail is used to shape an image to a thumbnail.
Example:
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:
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:
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: