[vc_row no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″][text_output][/text_output][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/1″][text_output]In this Bootstrap tutorial, we’ll learn:
- Bootstrap grid system
- Breakpoints
- Container & its types
- Rows
- Bootstrap Helping Material
In previous tutorial, we learnt about the bootstrap components that are necessary to start working on Bootstrap.[/text_output][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/2″][vc_widget_sidebar sidebar_id=”ups-sidebar-boostrap3″][/vc_column][vc_column fade_animation_offset=”45px” width=”1/2″][/vc_column][/vc_row][vc_row no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″ id=”Bootstrap-Grid-System” class=”” style=””][text_output]
Table of Contents
Grid System
Grid system is the base of bootstrap responsive layout. Bootstrap comes with 12-column grid layout that can be accessed via CSS classes. Three key layouts exist that form the basis of the grid system: containers, rows and columns. We will discuss containers and rows layout in this tutorial and, column layout in the next tutorial.[/text_output][text_output]
Breakpoints
In the grid system, breakpoints are used to make the webpage layout responsive. Breakpoints in bootstrap are as follows:
[/text_output][lightbox selector=”.x-img-link” opacity=”0.875″ prev_scale=”0.75″ prev_opacity=”0.75″ next_scale=”0.75″ next_opacity=”0.75″ thumbnails=”true”][image type=”none” float=”none” link=”true” info=”tooltip” info_place=”top” info_trigger=”click” src=”8548″ alt=”Grid System” href=”” title=”Break Point Table” info_content=”Table” lightbox_caption=”Break Point Table” id=”” class=”.x-img-link” style=”” lightbox_thumb=”8548″][text_output]These breakpoints can be used by adding bootstrap classes. The grid system can be visualized at the bootstrap website via this link https://v4-alpha.getbootstrap.com/layout/grid/.[/text_output][/vc_column][/vc_row][vc_row no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″ id=”container-types” class=”” style=””][text_output]
Container
Container class is the base of grid system that controls the layout. Rows and columns should be enclosed within the container to work properly.It creates a padding of “15 pixels” on each side of the page content.[/text_output][/vc_column][/vc_row][vc_row no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″][vc_raw_html]JTNDYSUyMGNsYXNzJTNEJTIyanNiaW4tZW1iZWQlMjIlMjBocmVmJTNEJTIyaHR0cCUzQSUyRiUyRmpzYmluLmNvbSUyRmhlZ2Fxb3clMkZlbWJlZCUzRmh0bWwlMkNvdXRwdXQlMjIlM0VDb250YWluZXIlMjBFeGFtcGxlJTIwb24lMjBqc2Jpbi5jb20lM0MlMkZhJTNFJTNDc2NyaXB0JTIwc3JjJTNEJTIyaHR0cCUzQSUyRiUyRnN0YXRpYy5qc2Jpbi5jb20lMkZqcyUyRmVtYmVkLm1pbi5qcyUzRjMuNDAuMyUyMiUzRSUzQyUyRnNjcmlwdCUzRQ==[/vc_raw_html][text_output]
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Container Example (BP3)">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Container Example</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<h3>Without container</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias facere, repudiandae sequi, quidem voluptatibus sint aut? Fuga error facilis recusandae officia reiciendis delectus animi. Animi, consequatur. Similique optio, dolores necessitatibus.
</p>
<div class="container">
<h3>Inside Container</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda velit sapiente, laboriosam in deserunt, nisi libero nostrum dolore rerum iusto inventore impedit sit dignissimos quibusdam delectus harum accusamus! Tempora, sapiente.
</p>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JQuery CDN -->
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</body>
</html>[/text_output][/vc_column][/vc_row][vc_row no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/2″][text_output]Click to view in full screen[/text_output][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”1/2″][vc_btn title=”Try It..!!” style=”flat” shape=”square” color=”green” link=”url:http%3A%2F%2Fjsbin.com%2Fhegaqow%2Fedit%3Fhtml%2Coutput||target:%20_blank|”][/vc_column_inner][/vc_row_inner][text_output]
Code Explanation:
Line 16-19: Content is not inside the container so it touches the page borders.
Line 21-26: Content is enclosed within the div having a container class, creating 15 pixels padding on left and right side of page.[/text_output][/vc_column][/vc_row][vc_row no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″][text_output]
Types of Container
There are two types of Container:
- Fixed-Width
- Fluid
[/text_output][text_output]
Fixed-Width
Fixed-width container manages the page content with respect to fixed breakpoints (described above). It will change the content orientation with the change in breakpoints. You can use class= “container” within the div to get a fixed-width container. [/text_output][/vc_column][/vc_row][vc_row no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″][text_output]
Fluid:
Fluid container adjusts the content with respect to device size. Content will adjust itself without breakpoints, making the content pixel perfect. You can use class= “container-fluid” to get a fluid container. [/text_output][text_output]
Examples
In the following example, container and container-fluid classes can be visualized by difference of padding on left and right side. Container (fixed) follows its breakpoints and will change the layout when breakpoints change while container-fluid adjusts content according to actual screen size.[/text_output][vc_raw_html css=”.vc_custom_1484642878538{border-top-width: 2px !important;border-right-width: 2px !important;border-bottom-width: 2px !important;border-left-width: 2px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;border-left-color: #0f0f0f !important;border-left-style: solid !important;border-right-color: #0f0f0f !important;border-right-style: solid !important;border-top-color: #0f0f0f !important;border-top-style: solid !important;border-bottom-color: #0f0f0f !important;border-bottom-style: solid !important;}”]JTNDYSUyMGNsYXNzJTNEJTIyanNiaW4tZW1iZWQlMjIlMjBocmVmJTNEJTIyaHR0cCUzQSUyRiUyRmpzYmluLmNvbSUyRnFld3VyZXglMkZlbWJlZCUzRmh0bWwlMkNvdXRwdXQlMjIlM0VDb250YWluZXIlMjAlMkMlMjBjb250YWluZXItZmx1aWQlMjBvbiUyMGpzYmluLmNvbSUzQyUyRmElM0UlM0NzY3JpcHQlMjBzcmMlM0QlMjJodHRwJTNBJTJGJTJGc3RhdGljLmpzYmluLmNvbSUyRmpzJTJGZW1iZWQubWluLmpzJTNGMy40MC4zJTIyJTNFJTNDJTJGc2NyaXB0JTNF[/vc_raw_html][text_output]
<!DOCTYPE html> <html> <head> <meta name="description" content="container & container-fluid BP3"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Container , container-fluid</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <div class="container"> <h3>Inside Fixed Container</h3> <p>Content will change its layout after reaching specific breakpoints. Can be visualized by changing screen size or by dragging result pan in live preview </p> </div> <div class="container-fluid"> <h3>Inside Container Fluid</h3> <p>Content will change its layout with respect to screen size without any breakpoints. Can visualize difference by changing screen size by dragging result pan in live preview </p> </div> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- JQuery CDN --> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> </body> </html>
[/text_output][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/2″][text_output]Click to view in full screen[/text_output][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”1/2″][vc_btn title=”Try It..!!” style=”flat” shape=”square” color=”green” link=”url:http%3A%2F%2Fjsbin.com%2Fqewurex%2Fedit%3Fhtml%2Coutput||target:%20_blank|”][/vc_column_inner][/vc_row_inner][text_output]
Code Explanation
Line 17-20: Content, enclosed in ‘div’ having the class ‘container’, will change its layout after change in breakpoints. It can be visualized by changing screen size or by dragging result pan in live preview.
Line 22-25: Content, enclosed in ‘div’ having the class ‘container-fluid’, will change its layout with respect to screen size without any breakpoints. The difference can be visualized by changing screen size by dragging result pan in live preview.
[/text_output][/vc_column][/vc_row][vc_row no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″ id=”working-with-rows” class=”” style=””][text_output]
Rows:
Rows in bootstrap are horizontal divisions. Each row can be divided into 12 columns. A row should be enclosed in a container div (either fluid or fixed). We can add multiple rows as per our requirement.
Note: Rows remove padding given by container class to align to the grid properly. /text_output][vc_row_inner padding_top=”0px” padding_bottom=”0px”][vc_column_inner fade_animation_offset=”45px” width=”1/1″][vc_raw_html css=”.vc_custom_1484642713787{border-top-width: 1px !important;border-right-width: 1px !important;border-bottom-width: 1px !important;border-left-width: 1px !important;border-left-color: #000000 !important;border-left-style: solid !important;border-right-color: #000000 !important;border-right-style: solid !important;border-top-color: #000000 !important;border-top-style: solid !important;border-bottom-color: #000000 !important;border-bottom-style: solid !important;}”]JTNDYSUyMGNsYXNzJTNEJTIyanNiaW4tZW1iZWQlMjIlMjBocmVmJTNEJTIyaHR0cCUzQSUyRiUyRmpzYmluLmNvbSUyRm11dGF5ZXMlMkZlbWJlZCUzRmh0bWwlMkNvdXRwdXQlMjIlM0VKUyUyMEJpbiUyMG9uJTIwanNiaW4uY29tJTNDJTJGYSUzRSUzQ3NjcmlwdCUyMHNyYyUzRCUyMmh0dHAlM0ElMkYlMkZzdGF0aWMuanNiaW4uY29tJTJGanMlMkZlbWJlZC5taW4uanMlM0YzLjQwLjMlMjIlM0UlM0MlMkZzY3JpcHQlM0U=[/vc_raw_html][/vc_column_inner][/vc_row_inner][text_output]
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Row Example">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Using Row class</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h3>Without Row class</h3>
<p>This content is outside row class and has padding on both left and right side of content.</p>
<div class="row">
<h3>Inside Row</h3>
<p>It does not have padding on sides of content as Row class removes padding from both sides of content</p>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JQuery CDN -->
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</body>
</html>[/text_output][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/2″][text_output]Click to view in full screen[/text_output][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”1/2″][vc_btn title=”Try It..!!” style=”flat” shape=”square” color=”green” link=”url:http%3A%2F%2Fjsbin.com%2Fraxinex%2Fedit%3Fhtml%2Ccss%2Coutput||target:%20_blank|”][/vc_column_inner][/vc_row_inner][text_output]
Code Explanation
Line 18-19: Content is without Row class and has default container padding on both sides.
Line 21-24: Content is enclosed within the ‘div’ having the ‘row’ class. Padding is removed from both sides of the content.
[/text_output][/vc_column][/vc_row][vc_row no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″][text_output]
Conclusion
In this tutorial, we have discussed the grid system and its elements except for columns. In the next tutorial, we are going to discuss bootstrap columns, its types and usage.
Hope you liked it. See you next time.[/text_output][/vc_column][/vc_row][vc_row no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″ id=”Project-Files” class=”” style=””][vc_btn title=”Download Project Files” style=”flat” shape=”square” color=”green” align=”center” link=”url:https%3A%2F%2Fgithub.com%2Fhfarazm%2FBootstrap-3-Tutorials-Hfarazm.com|title:Download%20Project%20Files|target:%20_blank|”][text_output]
In the next tutorial, we will take a look at bootstrap columns and will create a cool landing page.
[/text_output][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/1″ id=”quiz” class=”” style=””][vc_raw_html]JTNDaHIlM0UlMEElNUJXcFByb1F1aXolMjA0JTVEJTBBJTNDaHIlM0U=[/vc_raw_html][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row padding_top=”0px” padding_bottom=”0px”][vc_column fade_animation_offset=”45px” width=”1/1″][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/2″][vc_btn title=”<< Previous Tutorial” style=”flat” shape=”square” color=”green” align=”center” link=”url:http%3A%2F%2Fblog.hfarazm.com%2Fbasic-bootstrap-template%2F|title:Basic%20Bootstrap%20Template||”][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”1/2″][vc_btn title=”Next Tutorial Soon” style=”flat” shape=”square” align=”center” link=”url:%23|title:Wait%20for%20next%20tutorial||”][/vc_column_inner][/vc_row_inner][vc_row_inner padding_top=”0px” padding_bottom=”0px”][vc_column_inner fade_animation_offset=”45px” width=”1/1″][share title=”Share this Post” facebook=”true” twitter=”true” google_plus=”true” linkedin=”true” reddit=”true” email=”true” id=”” class=”” style=””][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]
