Contribute
Bootstrap

Overview Of Bootstrap Image Shapes And Grid Offset

Image shapes

  • Rounded corners
  • Circle
  • Thumbnail

Rounded Corners

  • Rounded corners are used for Rounded corners of an image.
  • .img-roundedclass adds Rounded corners to an image.
  • Rounded corners are not supported in IE8.
  • The image corners will be rounded to display the images.

Sample program for Rounded Corners

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Button size</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>  
  9.   
  10. <body>  
  11.     <div class="text-center img1"> <img src="one.png" class="img-rounded" width="304" height="304"> </div>  
  12.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  13.     <script type="text/css" src="js/jquery"></script>  
  14. </body>  
  15.   
  16. </html>  

Output

Output

  • The image given above corners will be rounded shape i.e. Rounded Corners.

Circle

  • Circle is used for circle shape of an image.
  • .img-circleclass shaped the image to a Circle.
  • Rounded corners will not to be supported in IE8.
  • The image corners will be Circle in shape.

Sample program for Circle

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Button size</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>  
  9.   
  10. <body>  
  11.     <div class="text-center img1"> <img src="one.png" class="img-circle" width="300" height="300"> </div>  
  12.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  13.     <script type="text/css" src="js/jquery"></script>  
  14. </body>  
  15.   
  16. </html>  

Output
Output

  • The image given above will be shaped for Circle.

Thumbnail

  • The thumbnail is used to create default border of an image. It should be in Rounded Corners
  • .img- thumbnailclass shaped the image to create default border of an image. It should be in rounded corners

Sample program for Thumbnail

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Button size</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>  
  9.   
  10. <body background="black">  
  11.     <div class="text-center img1"> <img src="one.png" class="img-thumbnail" width="304" height="304"></div>  
  12.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  13.     <script type="text/css" src="js/jquery"></script>  
  14. </body>  
  15.   
  16. </html>  

Output

Output

Responsive images

  • The image will come under all sizes.
  • Responsive images automatically adjust to fit the size of the screen.
  • You can create a responsive image by adding .img-responsive.
  • That class will be added in <img>tag.
  • The image will automatically respond to the parent element.
  • Automatically the .img-responsive class will apply the display:block, max-width:100% and height:auto; to the image.

Sample program for Responsive Images

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Button size</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>  
  9.   
  10. <body background="black">  
  11.     <div class="text-center img1"> <img class="img-responsive" src="one.png">  
  12.         <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  13.         <script type="text/css" src="js/jquery"></script>  
  14. </body>  
  15.   
  16. </html>  

Output

  • The program given above will be created to responsive images in the parent element.
  • Resize the Browser Window to see the effect.

Image Gallery

  • You can also use Bootstrap's grid system in conjunction with the.thumbnail class to create an Image Gallery.
  • We can see the one picture, which is having the link. We can click the link and the gallery will open.

Sample program for an Image Gallery

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Button size</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>  
  9.   
  10. <body background="black">  
  11.     <div class="row">  
  12.         <div class="col-md-4">  
  13.             <div class="thumbnail"> <a href="one.png">  
  14.   
  15. <img src="two.jpg" alt="Lights" style="width:100%">  
  16.   
  17. <div class="caption">  
  18.   
  19. <p>Open gallery</p>  
  20.   
  21. </div>  
  22.   
  23. </a> </div>  
  24.         </div>  
  25.         <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  26.         <script type="text/css" src="js/jquery"></script>  
  27. </body>  
  28.   
  29. </html>  

Output 1

Output

  • Now, we can click Open gallery link and the gallery will open.
  • Now, we can see after clicking Open gallery, the gallery will open.

Output 2

Output

  • The image will be open (we can store lots of images in the gallery).

Responsive Embeds

  • Videos or slideshows scale properly on any device.
  • Classes can be applied directly to <iframe>, <embed>, <video>, and <object> elements.
  • containing<div>defines the aspect ratio of the video.

What is an aspect ratio?

  • Image describes the proportional relationship between its width and height.
  • Two common video aspect ratio are 4:3 and 16:9.
  • The 4:3 is used in universal video format of the 20th century.
  • The 16:9 universal is for HD television and digital television.

Sample programming for Responsive Embeds (aspect ratio)

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Button size</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>  
  9. <!-- 16:9 aspect ratio -->  
  10. <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div>  
  11. <!-- 4:3 aspect ratio -->  
  12. <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div>  
  13. <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  14. <script type="text/css" src="js/jquery"></script>  
  15. </body>  
  16.   
  17. </html>  

Bootstrap Grid Offset

What is Bootstrap offset?

  • We have Bootstrap grid system two containers, where the first container is having two columns (to be divided into 3 and 3 columns (3+3=6)) and the second container is having four columns(3+3+3+3=12).

Sample program

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <meta name="viewport" content="width=device-width, initial scale=1">  
  7.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  8.     <link rel="stylesheet" type="text/css" href="css/offset.css"> </head>  
  9.   
  10. <body bgcolor="pink">  
  11.     <div class="container">  
  12.         <div class="row">  
  13.             <div class="col-md-3">  
  14.                 <div class="customDiv">column 1</div>  
  15.             </div>  
  16.             <div class="col-md-3">  
  17.                 <div class="customDiv">column 2</div>  
  18.             </div>  
  19.         </div>  
  20.     </div>  
  21.     <div class="container">  
  22.         <div class="row">  
  23.             <div class="col-md-3">  
  24.                 <div class="customDiv">column 1</div>  
  25.             </div>  
  26.             <div class="col-md-3">  
  27.                 <div class="customDiv">column 2</div>  
  28.             </div>  
  29.             <div class="col-md-3">  
  30.                 <div class="customDiv">column 3</div>  
  31.             </div>  
  32.             <div class="col-md-3">  
  33.                 <div class="customDiv">column 4</div>  
  34.             </div>  
  35.         </div>  
  36.     </div>  
  37.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  38.     <script type="text/css" src="js/jquery"></script>  
  39. </body>  
  40.   
  41. </html>  

Output

Output

What all are the classes we can use,

Bootstrap grid classBootstrap offset classes
.col-xs-*.col-xs-offset-*
.col-sm-*.col-sm- offset-*
.col-md-*.col-md- offset-*
.col-lg-*.col-lg- offset-*

Now, we want to move the first container columns in one column space.

Sample program

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <meta name="viewport" content="width=device-width, initial scale=1">  
  7.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  8.     <link rel="stylesheet" type="text/css" href="css/offset.css"> </head>  
  9.   
  10. <body bgcolor="pink">  
  11.     <div class="container">  
  12.         <div class="row">  
  13.             <div class="col-md-3col-md-offset-3 ">  
  14.                 <div class="customDiv">column 1</div>  
  15.             </div>  
  16.             <div class="col-md-3">  
  17.                 <div class="customDiv">column 2</div>  
  18.             </div>  
  19.         </div>  
  20.     </div>  
  21.     <div class="container">  
  22.         <div class="row">  
  23.             <div class="col-md-3">  
  24.                 <div class="customDiv">column 1</div>  
  25.             </div>  
  26.             <div class="col-md-3">  
  27.                 <div class="customDiv">column 2</div>  
  28.             </div>  
  29.             <div class="col-md-3">  
  30.                 <div class="customDiv">column 3</div>  
  31.             </div>  
  32.             <div class="col-md-3">  
  33.                 <div class="customDiv">column 4</div>  
  34.             </div>  
  35.         </div>  
  36.     </div>  
  37.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  38.     <script type="text/css" src="js/jquery"></script>  
  39. </body>  
  40.   
  41. </html>  

Output

Output

Create a six column gap between the first and second columns in the first row

Program

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <meta name="viewport" content="width=device-width, initial scale=1">  
  7.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  8.     <link rel="stylesheet" type="text/css" href="css/offset.css"> </head>  
  9.   
  10. <body bgcolor="pink">  
  11.     <div class="container">  
  12.         <div class="row">  
  13.             <div class="col-md-3">  
  14.                 <div class="customDiv">column 1</div>  
  15.             </div>  
  16.             <div class="col-md-3col-md-offset-6 ">  
  17.                 <div class="customDiv">column 2</div>  
  18.             </div>  
  19.         </div>  
  20.     </div>  
  21.     <div class="container">  
  22.         <div class="row">  
  23.             <div class="col-md-3">  
  24.                 <div class="customDiv">column 1</div>  
  25.             </div>  
  26.             <div class="col-md-3">  
  27.                 <div class="customDiv">column 2</div>  
  28.             </div>  
  29.             <div class="col-md-3">  
  30.                 <div class="customDiv">column 3</div>  
  31.             </div>  
  32.             <div class="col-md-3">  
  33.                 <div class="customDiv">column 4</div>  
  34.             </div>  
  35.         </div>  
  36.     </div>  
  37.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  38.     <script type="text/css" src="js/jquery"></script>  
  39. </body>  
  40.   
  41. </html>  

Output

Output

  • This is the way of creating Bootstrap grid offset columns
Now, we will learn how to create grid offset, using images.
  • Create three equal columns in the second row. Image in the first row should be centered.
  • The img will be in same size of the column and at the same time, responsive image and others use image classes

Sample program

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <meta name="viewport" content="width=device-width, initial scale=1">  
  7.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  8.     <link rel="stylesheet" type="text/css" href="css/offset.css"> </head>  
  9.   
  10. <body bgcolor="pink">  
  11.     <div class="container">  
  12.         <div class="row"> <img src="one.png" class="col-md-4 col-md-offset-4 img-responsive" /> </div>  
  13.     </div>  
  14.     <div class="container">  
  15.         <div class="row">  
  16.             <div class="col-md-4">  
  17.                 <div class="customDiv">column 1</div>  
  18.             </div>  
  19.             <div class="col-md-4">  
  20.                 <div class="customDiv">column 2</div>  
  21.             </div>  
  22.             <div class="col-md-4 ">  
  23.                 <div class="customDiv">column 3</div>  
  24.             </div>  
  25.         </div>  
  26.     </div>  
  27.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  28.     <script type="text/css" src="js/jquery"></script>  
  29. </body>  
  30.   
  31. </html>  

Output

Output

  • In the given output, it will be responsive image, using Grid Offset.
  • Img-circle, img-thumbnail classes are using Grid Offset.
  • img-rounded corners are not working because the grid classes are not supported.

Example program for img classes, using grid offset columns.

Program 1

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <meta name="viewport" content="width=device-width, initial scale=1">  
  7.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  8.     <link rel="stylesheet" type="text/css" href="css/offset.css"> </head>  
  9.   
  10. <body bgcolor="pink">  
  11.     <div class="container">  
  12.         <div class="row"> <img src="one.png" class="col-md-4 col-md-offset-4 img-responsive img-circle" /> </div>  
  13.     </div>  
  14.     <div class="container">  
  15.         <div class="row">  
  16.             <div class="col-md-4">  
  17.                 <div class="customDiv">column 1</div>  
  18.             </div>  
  19.             <div class="col-md-4">  
  20.                 <div class="customDiv">column 2</div>  
  21.             </div>  
  22.             <div class="col-md-4 ">  
  23.                 <div class="customDiv">column 3</div>  
  24.             </div>  
  25.         </div>  
  26.     </div>  
  27.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  28.     <script type="text/css" src="js/jquery"></script>  
  29. </body>  
  30.   
  31. </html>  

Output 1

Output

Program 2
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <meta name="viewport" content="width=device-width, initial scale=1">  
  7.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  8.     <link rel="stylesheet" type="text/css" href="css/offset.css"> </head>  
  9.   
  10. <body bgcolor="pink">  
  11.     <div class="container">  
  12.         <div class="row"> <img src="one.png" class="col-md-4 col-md-offset-4 img-responsive img-thumbnail" /> </div>  
  13.     </div>  
  14.     <div class="container">  
  15.         <div class="row">  
  16.             <div class="col-md-4">  
  17.                 <div class="customDiv">column 1</div>  
  18.             </div>  
  19.             <div class="col-md-4">  
  20.                 <div class="customDiv">column 2</div>  
  21.             </div>  
  22.             <div class="col-md-4 ">  
  23.                 <div class="customDiv">column 3</div>  
  24.             </div>  
  25.         </div>  
  26.     </div>  
  27.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  28.     <script type="text/css" src="js/jquery"></script>  
  29. </body>  
  30.   
  31. </html>  

Output 2

Output

Conclusion

I hope, now you can understand how to create Bootstrap image shapes & Grid Offset columns, using img classes. In future posts, we can learn about the Bootstrap techniques step by step. Stay tuned.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs