January 25, 2016

Offsetting Columns in Bootstrap 3 With Example

By Krishnaa Bootstrap 0 Comments

In Bootstrap, we have a feature called offsetting columns. With the help of this feature, you can shift your columns to the left. Offset number will determine the column gap you want to have from the left. For example, if you have created a row with a column span of 6 and you shift it to the left by offset 3. Then, there will be a 3 columns gap from the left. Sample code is given below.

There are 4 types of offsetting column classes in Bootstrap.

col-xs-offset-(offset_number)
col-sm-offset-(offset_number)
col-md-offset-(offset_number)
col-lg-offset-(offset_number)

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tutorial </title>
 	
 	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
 	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
 	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>
	
 </head>
<body>
 
<div class="container-fluid">
 	<div class="row">
 		<div class="col-xs-6 col-xs-offset-3" style="background-color: red; color: white"><h1>Hello</h1></div>
 		<div class="col-xs-6 col-xs-offset-3" style="background-color: green; color:white"><h1>World!</h1></div>
 	</div>
 </div>

</body>
</html>

You May Also Like: