Create a Ticket

Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Doc Nav

Images

Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.

Images in Bootstrap are made responsive with.img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

Responsive image 
                                        
<div class="image-box mb-20">
    <img class="img-fluid" src="img/docs/r-img-1.jpg" alt="Responsive image">
</div>
Markup
Copy

Image shapes

Easily create images in different shapes with adding one class to the tag.

Round image
Circle image
Thumbnail 
                                        
<div class="image-shapes-box mb-20">
    <div class="row">
        <div class="col-md-6 text-center">
            <img src="assets/images/thumb/l-1.jpg" class="rounded" alt="Round image">
        </div>
        <div class="col-md-6 text-center">
            <img src="assets/images/thumb/l-2.jpg" class="rounded-circle" alt="Circle image">
        </div>
        <div class="col-md-6 col-center mt-30">
            <img src="assets/images/thumb/l-3.jpg" class="img-thumbnail" alt="Thumbnail">
        </div>
    </div>
</div>
Markup
Copy

Aligning images

Align images with the helper float classes or text alignment classes. block-level images can be centered using the .mx-auto margin utility class.

... ... 
        
<div class="aligningimage-box fix mb-20">
    <img src="img/docs/Round-img-1.jpg" class="rounded float-left" alt="...">
    <img src="img/docs/circle-img-1.jpg" class="rounded float-right" alt="...">
</div>
Markup
Copy