Image

Installation quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut laboe et doloreagnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi aliquid ex ea commodi consequatur? Quis autem vel eum iure

Rrem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut laboe et dolore gnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum

Responsive images

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="assets/images/project/project-1.jpg" alt="Responsive image">
</div>
Markup
Copy

Image shapes

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

Round image
Circle image
Thumbnail 

<div class="image-shapes-box mb-20">
    <div class="row">
        <div class="col-md-4 text-center">
            <img src="assets/images/thumb/l-1.jpg" class="rounded" alt="Round image">
        </div>
        <div class="col-md-4 text-center">
            <img src="assets/images/thumb/l-2.jpg" class="rounded-circle" alt="Circle image">
        </div>
        <div class="col-md-4 text-center">
            <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="assets/images/thumb/l-1.jpg" class="rounded float-start" alt="...">
    <img src="assets/images/thumb/l-2.jpg" class="rounded float-end" alt="...">
</div>
Markup
Copy

Figures

Anytime you need to display a piece of content—like an image with an optional caption, consider using a <figure>.

Image
A caption for the above image.

<div class="aligningimage-box fix mb-20">
    <img src="assets/images/thumb/l-1.jpg" class="rounded float-start" alt="...">
    <img src="assets/images/thumb/l-2.jpg" class="rounded float-end" alt="...">
</div>
Markup
Copy