Buzz
In this tutorial, Mytour presents an overview of images in Bootstrap. Additionally, readers can explore other Bootstrap lessons on Mytour to learn more about the Button Group in Bootstrap.
How are images used in Bootstrap?
1. Formatting Images in Bootstrap
2. Creating Responsive Images and Videos in Bootstrap
3. Aligning Images in Bootstrap
1. Formatting Images in Bootstrap
Images are essential elements in modern web design. Formatting and strategically placing images on websites play a crucial role in enhancing user experience.
By utilizing the built-in classes in Bootstrap, we can easily format images in various styles, such as creating images with rounded corners, ...
Example: The following example illustrates how to format images in Bootstrap with different styles:
The output result looks like this:
2. Creating Responsive Images and Videos in Bootstrap
In Bootstrap, we can create responsive images by adding the .img-fluid class to the img tag. This class applies the style max-width: 100%; and height: auto; to the image to scale appropriately with the containing element, in case the image width exceeds the container element.
For example: the illustration below showcases how to create responsive images and videos in Bootstrap.
The output result looks like this:
Note: When crafting responsive website layouts, remember to create responsive images. Failure to do so may lead to the image width exceeding that of the parent element, causing image overflow and disrupting the website layout.
Additionally, we can embed videos or slideshows within responsive websites without affecting the original aspect ratio. To achieve this, simply wrap any embeddable content, such as an iframe or video, in a
Even apply the child class .embed-responsive-item on the embedded element to align with different format attributes as shown in the example below:
In this example, we create 4 responsive videos with different aspect ratios (21:9, 16:9, 4:3, and 1:1) using the classes .embed-responsive-21by9, .embed-responsive-16by9, .embed-responsive-4by3, and the class .embed-responsive-1by1.
Tips: The aspect ratio of an image describes the relationship between width and height. Two commonly used video frame ratios are 16:9 and 4:3.
3. Adjusting Images in Bootstrap
To align an image left or right, use the classes .pull-left or .pull-right. Alternatively, employ text alignment classes like .text-left, .text-right, and .text-center on parent elements to align inline images left, right, or center.
For centering block-style images, utilize the margin utility class .mx-auto.
Example: In the illustration below, it demonstrates how to align images in Bootstrap:
The resulting output looks like this:
This lesson from Mytour has just introduced you to images in Bootstrap. If you have any inquiries or questions that need clarification, readers can leave their comments below the article. In the next tutorial, Mytour will further introduce you to Cards in Bootstrap.
