What is img-fluid? It is part of the Bootstrap image. Here's everything you need to know about images in Bootstrap 5.
Bootstrap is an open source CSS framework, primarily for building responsive web and mobile applications. This framework includes general CSS settings; a responsive grid system, pre-built elements, slides, forms, navigation bars and optional JavaScript plugins. All help you speed up web and application development.
You can create components by adding the Bootstrap class to the elements. Those classes also style the images and optimize them for responsive behavior, which means scaling along with the image container when the browser window is resized.
An important factor in flexible layouts is responsive images. They should be resized, oriented, and resolution based on the end user device, allowing websites to detect and respond to each visitor's screen conditions. And Bootstrap will help you do that easily.
Adaptive photo
In Bootstrap, you would use class .img-fluid on all images you want it to be responsive. This class will “tell” the browser not to expand the image larger than its original size by using it max-widthand shrink the image if the browser window is narrower than the width of the image (in pixels).
To make images responsive, you add a class .img-fluid to the card
Ảnh thích ứng
If you want to fix the fixed size of the image, just add width=”kich_thuoc_px” and height=”kich_thuoc_px” after the element alt of card như trên, nếu để ảnh theo đúng kích thước gốc, bạn bỏ width và height đi là được. Chạy code trên ta có kết quả sau:
Rounded corners for photos
Class .rounded will round the corners of the image (equivalent to border-radius:6px;) like the example below:
Bo góc ảnh
Then the 4 corners of the image will be very slightly rounded as follows:
Round the image
Class .rounded-circle will crop the image into a circle like below:
Bo tròn ảnh
The uploaded photo has a pink background, but when using class .rounded-circle then you will only see the following:
Thumbnails, thumbnails in Bootstrap
Class .img-thumbnail will convert the photo to a thumbnail, with a border. And just like above, if you need to fix the size, you only need to declare the width and height of the image.
Thumbnail
When running the above file you will receive the following results:
Align image left/right
You align the image to the right using class .float-rightalign to the left with .float-left:
Căn lề cho ảnh
The files on the image are aligned left and right at the same time for your convenience, the results are as follows:
Align image to center on Bootstrap
To center the image is a bit more complicated, you will have to add a class .mx-auto (margin:auto) and .d-block (display:block) for photos, like the example below:
Căn giữa ảnh
As a result, the image is centered as shown below:
