Overview Of Bootstrap Image Shapes And Grid Offset

100

Article

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

<!DOCTYPE html>
<html>
<head>
<title>Button size</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>
<body>
<div class="text-center img1"> <img src="one.png" class="img-rounded" width="304" height="304"> </div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<title>Button size</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>
<body>
<div class="text-center img1"> <img src="one.png" class="img-circle" width="300" height="300"> </div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<title>Button size</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>
<body background="black">
<div class="text-center img1"> <img src="one.png" class="img-thumbnail" width="304" height="304"></div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<title>Button size</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>
<body background="black">
<div class="text-center img1"> <img class="img-responsive" src="one.png">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</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

<!DOCTYPE html>
<html>
<head>
<title>Button size</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>
<body background="black">
<div class="row">
<div class="col-md-4">
<div class="thumbnail"> <a href="one.png">
<img src="two.jpg" alt="Lights" style="width:100%">
<div class="caption">
<p>Open gallery</p>
</div>
</a> </div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output 1

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

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 20^th century.
The 16:9 universal is for HD television and digital television.

Sample programming for Responsive Embeds (aspect ratio)

<!DOCTYPE html>
<html>
<head>
<title>Button size</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div>
<div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/offset.css"> </head>
<body bgcolor="pink">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="customDiv">column 1</div>
</div>
<div class="col-md-3">
<div class="customDiv">column 2</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="customDiv">column 1</div>
</div>
<div class="col-md-3">
<div class="customDiv">column 2</div>
</div>
<div class="col-md-3">
<div class="customDiv">column 3</div>
</div>
<div class="col-md-3">
<div class="customDiv">column 4</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/offset.css"> </head>
<body bgcolor="pink">
<div class="container">
<div class="row">
<div class="col-md-3col-md-offset-3 ">
<div class="customDiv">column 1</div>
</div>
<div class="col-md-3">
<div class="customDiv">column 2</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="customDiv">column 1</div>
</div>
<div class="col-md-3">
<div class="customDiv">column 2</div>
</div>
<div class="col-md-3">
<div class="customDiv">column 3</div>
</div>
<div class="col-md-3">
<div class="customDiv">column 4</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

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

Program

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/offset.css"> </head>
<body bgcolor="pink">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="customDiv">column 1</div>
</div>
<div class="col-md-3col-md-offset-6 ">
<div class="customDiv">column 2</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="customDiv">column 1</div>
</div>
<div class="col-md-3">
<div class="customDiv">column 2</div>
</div>
<div class="col-md-3">
<div class="customDiv">column 3</div>
</div>
<div class="col-md-3">
<div class="customDiv">column 4</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/offset.css"> </head>
<body bgcolor="pink">
<div class="container">
<div class="row"> <img src="one.png" class="col-md-4 col-md-offset-4 img-responsive" /> </div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="customDiv">column 1</div>
</div>
<div class="col-md-4">
<div class="customDiv">column 2</div>
</div>
<div class="col-md-4 ">
<div class="customDiv">column 3</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/offset.css"> </head>
<body bgcolor="pink">
<div class="container">
<div class="row"> <img src="one.png" class="col-md-4 col-md-offset-4 img-responsive img-circle" /> </div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="customDiv">column 1</div>
</div>
<div class="col-md-4">
<div class="customDiv">column 2</div>
</div>
<div class="col-md-4 ">
<div class="customDiv">column 3</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output 1

Program 2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/offset.css"> </head>
<body bgcolor="pink">
<div class="container">
<div class="row"> <img src="one.png" class="col-md-4 col-md-offset-4 img-responsive img-thumbnail" /> </div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="customDiv">column 1</div>
</div>
<div class="col-md-4">
<div class="customDiv">column 2</div>
</div>
<div class="col-md-4 ">
<div class="customDiv">column 3</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output 2

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

Frontend Developer Interview

Read by 3 people

Download Now!

Learn

View all