January 24, 2016

Column Classes & Spanning in Bootstrap 3 with Example

By Krishnaa Bootstrap 0 Comments

To create a container, we make use of container class for fix-width and container-fluid for fluid-width or fluid layout. To create a row, we make use of row class. But in terms of column, we have 4 column classes in Bootstrap for different screen sizes.

col-xs: XS stands for extra small displays where screen width is less than 768px.
col-sm: SM stands for smaller displays where screen width is greater than or equal to 768px.

col-md: MD stands for medium displays where screen width is greater than or equal to 992px.
col-lg: LG stands for larger displays where screen width is greater than or equal to 1200px.

To span a column in Grid system, you only need to add a number at the end of the column class and that number will specify how many columns you want to span. As you know, we have max 12 columns in a Grid, so that number should be between 1 and 12. An example is given below where we are spanning col-xs up to 6 columns in container class and container-fluid class.

<!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" style="background-color: red; color: white"><h1>Hello</h1></div>
 		<div class="col-xs-6" style="background-color: green; color:white"><h1>World!</h1></div>
 	</div>
 </div>

<br />

<div class="container">
 	<div class="row">
 		<div class="col-xs-6" style="background-color: red; color: white"><h1>Hello</h1></div>
 		<div class="col-xs-6" style="background-color: green; color:white"><h1>World!</h1></div>
 	</div>
 </div>

</body>
</html>

You May Also Like: