Images in Bootstrap, structure and usage


In the Bootstrap lesson below, Taimienphi.vn will introduce you to images in Bootstrap, how to format images and how to create responsive images and videos in Bootstrap.


Lesson below Taimienphi.vn will introduce you to images in Bootstrap. Also readers can refer to some Bootstrap lessons already on Taimienphi.vn to learn more about Button Group in Bootstrap.

How are images in Bootstrap used?

Table of Contents:
1. Format images in Bootstrap
2. Create responsive images and videos in Bootstrap
3. Align the image in Bootstrap

1. Format images in Bootstrap

Images are an indispensable element in modern web design. So the format and positioning of images displayed on web pages is extremely important, to improve user experience.

By using the layers built into Bootstrap, we can easily format images in different styles, such as creating images with 4 rounded corners, etc.

For example: The following example illustrates how to format images in Bootstrap in different styles:

Image in bootstrap

The output will look like the following:

Image in bootstrap 2

2. Create responsive images and videos in Bootstrap

In Bootstrap, we can create responsive images by adding layers .img-fluid on the card img. This layer applies style max-width: 100%; and height: auto; for images to scale to accommodate the containing element, in case if the width of the image is larger than the containing element.

For example: The following example illustrates how to create responsive images and videos in Bootstrap:

Image in bootstrap 3

The output will look like the following:

Image in bootstrap 4

Note: When creating responsive website layouts don’t forget to create responsive images, otherwise the image width can be as large as the width of the parent element, then the image will overflow and break the site layout.

We can also create videos or slide shows embedded in responsive web pages without affecting the original aspect ratio. To do this we just need to package any embedded part such as iframe or video in the element div and apply the class .embed-responsive and frame rate as .embed-responsive-16by9.

Even the subclass is applied .embed-responsive-item on the embedded element to match other attribute formats as in the example below:

Bootstrap image 5

In the example above we created 4 videos that responded to 4 different aspect ratios (21: 9, 16: 9, 4: 3 and 1: 1) using layers. .embed-responsive-21by9, .embed-responsive-16by9, .embed-responsive-4by3 and class .embed-responsive-1by1.

Tips: The aspect ratio of an image depicts the relationship between the ratio between width and height. The two most popular video aspect ratios are 16: 9 and 4: 3.

3. Align the image in Bootstrap

To align the image to the left or right, we use layers .pull-left or class .pull-right. Or use text alignment layers like .text-left, .text-right and .text-center on elements containing the parent element to align the inline image to the left, right or center.

To center the image in solid form, we use the alignment utility layer .mx-auto.

For example: In the example below illustrates how to align images in Bootstrap:

bootstrap image 6

The output will look like the following:

image in bootstrap 7

https://thuthuat.taimienphi.vn/hinh-anh-trong-bootstrap-51116n.aspx
The above lesson Taimienphi.vn has just introduced you to images in Bootstrap. In addition, if you have any questions or questions, you can leave your comments in the comment section below the article. In the next lesson, Taimienphi.vn will introduce you further Card in Bootstrap.

.

Add a Comment

Your email address will not be published. Required fields are marked *