Image Styles

Image Classes

Class Name	Description	Example
.img-round	Shapes the image into a perfect circle.
.img-round-outline	Gives the image a full circular shape with a solid white outline.
.img-rounded	Applies a small, uniform border-radius to create rounded corners.
.img-center	Centers the image.
.img-left	Floats the image to the left of the parent element.
.img-right	Floats the image to the right of the parent element.
.img-responsive	Makes an image scale nicely to the parent element.

    <!-- Round Image -->
    <img src="path-to-image.jpg" class="img-round" alt="">
    
    <!-- Round Image with Outline -->
    <img src="path-to-image.jpg" class="img-round-outline" alt="">
    
    <!-- Rounded Image -->
    <img src="path-to-image.jpg" class="img-rounded" alt="">
    
    <!-- Centered Image -->
    <img src="path-to-image.jpg" class="img-center" alt="">
    
    <!-- Left-aligned Image -->
    <img src="path-to-image.jpg" class="img-left" alt="">
    
    <!-- Right-aligned Image -->
    <img src="path-to-image.jpg" class="img-right" alt="">
    
    <!-- Responsive Image -->
    <img src="path-to-image.jpg" class="img-responsive" alt="">