saftutorials.com
Grid System

Bootstrap developed based on total 12 columns for responsive design a website. Bootstrap is a responsive CSS framework, it has a mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.


Bootstrap Column Structure

1 Column Structure using class (col-md-1)

Col 1

    Col 2

Col 3
Col 4
Col 5
Col 6
Col 7
Col 8
Col 9
Col 10
Col 11
Col 12
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="col-md-1">
Col 1
</div>
<div class="col-md-1">
Col 2
</div>
<div class="col-md-1">
Col 3
</div>
<div class="col-md-1">
Col 4
</div>
<div class="col-md-1">
Col 5
</div>
<div class="col-md-1">
Col 6
</div>
<div class="col-md-1">
Col 7
</div>
<div class="col-md-1">
Col 8
</div>
<div class="col-md-1">
Col 9
</div>
<div class="col-md-1">
Col 10
</div>
<div class="col-md-1">
Col 11
</div>
<div class="col-md-1">
Col 12
</div>
</body>
</html>


2 Column Structure using class (col-md-2)

    Col 2

Col 4
Col 6
Col 8
Col 10
Col 12
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="col-md-2">
Col 2
</div>
<div class="col-md-2">
Col 4
</div>
<div class="col-md-2">
Col 6
</div>
<div class="col-md-2">
Col 8
</div>
<div class="col-md-2">
Col 10
</div>
<div class="col-md-2">
Col 12
</div>
</body>
</html>


3 Column Structure using class (col-md-3)

Col 3Col 6Col 9Col 12
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="col-md-3">
Col 3
</div>
<div class="col-md-3">
Col 6
</div>
<div class="col-md-3">
Col 9
</div>
<div class="col-md-3">
Col 12
</div>
</body>
</html>



4 Column Structure using class (col-md-4)

Col 4Col 8Col 12
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="col-md-4">
Col 4
</div>
<div class="col-md-4">
Col 8
</div>
<div class="col-md-4">
Col 12
</div>
</body>
</html>


5 Column Structure using class (col-md-5)

Col 2Col 5 (file column)
Col 5 (file column)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="col-md-2">
Col 2
</div>
<div class="col-md-5">
Col 5
</div>
<div class="col-md-5">
Col 5
</div>
</body>
</html>


6 Column Structure using class (col-md-6)

Col 6Col 6
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="col-md-6">
Col 6
</div>
<div class="col-md-6">
Col 6
</div>
</body>
</html>


12 Column Structure using class (col-md-12)

Col 12
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="col-md-12">
Col 12
</div>
</body>
</html>


Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic