Post
Ask Question

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 class Bootstrap 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.


Similar Articles