Bootstrap/C2/Grid-System-in-Bootstrap/English
Title of the script: Grid System in Bootstrap
Author: Neha Solanki
Domain Reviewer: Ankita Maske
Novice Reviewer: Abhijit Bonik
Keywords: Bootstrap, CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, Row class, Column class, Column class with breakpoints.
Visual Cue | Narration |
Slide: Title | Welcome to the Spoken Tutorial on “Grid System in Bootstrap” |
Slide 2:
Learning Objectives |
In this tutorial, we will learn about:
|
Slide 3:
System Requirements |
This tutorial is recorded using,
|
Slide 4: Prerequisite |
|
Slide: Grid System
Image1.png Highlight container Highlight rows Highlight columns |
Grid system uses a container, row and column in series.
We will create a layout as shown here at the end of this tutorial. First, a container is created using .container-lg class. Inside this, rows are created using .row class. Inside the row, columns are created using column classes. Row is used as a wrapper for columns. In this layout, the 1st row has 1 column, the 2nd row has 2 columns and the 3rd row has 3 columns. Let us see how to create this website layout. |
Point to Mypage.html & Mystyle.css in My-bootstrap folder | Locate the files Mypage.html and Mystyle.css in the My-bootstrap folder.
We will use Mypage.html and Mystyle.css files which we saved earlier for this demonstration. |
Slide 5: Code Files |
|
Point to Mypage.html in My-bootstrap folder
Open the file in text editor |
Open the file Mypage.html in the text editor.
Let us first see how to use the .row class. |
[gedit - Mypage.html]
Update: <div class="row"> Header </div> <div class="row"> Content </div> <div class="row"> Footer </div> |
Replace the <h1> tag with the code as shown here.
Inside the container, there are three <div> sections with row class. Each section represents Header, Content and Footer for the web page. |
Press Ctrl + S | Save the file. |
Point to Mystyle.css in My-bootstrap folder
Open Mystyle.css |
Let’s open the file Mystyle.css in the text editor. |
[gedit - Mystyle.css]
Type: .row {border: 3px solid orange;} |
After the .container-lg class, type the code as shown.
For better clarity, we have set a 3 pixel solid orange border for .row class. |
Press Ctrl + S | Save the file. |
Point to Mypage.html in the My-bootstrap folder
Open Mypage.html in Firefox |
Open the file Mypage.html in a web browser. |
[Firefox] | We see that 3 rows are added to the page which is defined in bootstrap.css. |
Textbox [Press Ctrl+Shift+C]
Right click >> Inspect Element |
Press Ctrl+Shift+C or right click on the page and select “Inspect Element”
Inspect Element window opens. |
Textbox [Press Ctrl+Shift+M]
Click on Responsive Design Mode |
Press Ctrl+Shift+M or Click on the “Responsive Design Mode” at the top right of this window.
Now the page is in responsive mode. |
Using mouse, drag to change the size | Let’s drag the right border, and increase and decrease the size of the screen.
We see that the width of the rows also changes as per the size of the container. |
Next we’ll learn about column class. | |
Slide: Column Class |
Let's see how to use column class with an example. |
Switch to Mypage.html | Switch to the Mypage.html file. |
[gedit - Mypage.html]
Update: <div class="container-lg"> <div class="row"> <div class="col"> <h1 class="text-danger"> Bharat Mart </h1> </div></div> <div class="row"> <div class="col"> <ul> <a href="#"><li> Fruits & Vegetables </li></a> <a href="#"><li> Foodgrain </li></a> <a href="#"><li> Beverages </li></a> <a href="#"><li> Personal care </li></a> <a href="#"><li> Snacks & Branded Foods </li></a> </ul></div> <div class="col"> <h3> Welcome to Online Grocery Shopping!! </h3> <p> Buy your essentials at the lowest price. Choose from fresh produce to packaged goods and get them delivered straight to your doorstep. Shop for Rs.1000 and more to get FREE delivery. <p> </div></div> <div class="row"> <div class="col"> <h5> ABOUT BHARAT </h5> <p> About us <br> FAQ </p> </div> <div class="col-auto"> <h5> PAYMENT AND SHIPPING </h5> <p> Payment Methods <br> Shipping Policy </p> </div> <div class="col"> <h5> CONTACT US </h5> <p> contact@bharat-online.com <br> 9000000001 </p> </div></div></div> |
Update the container section as shown here.
For the 1st row, we have created a single column using .col class which has a heading. For the 2nd row, we have created two equal width columns using .col class. The 1st column has a list and the 2nd column has some content. For the 3rd row, we have created three columns with some content. We have used .col class for 1st and 3rd columns, and .col-auto class for 2nd column. |
Press Ctrl + S | Save the file. |
Switch to Mystyle.css | Switch to the Mystyle.css file. |
[gedit - Mystyle.css]
Type: .col {border: 2px solid navy;} .col-auto {border: 5px solid navy;} |
Next to the .row class, type the column classes as shown here.
For better clarity, we have set a 2 pixel solid navy border for .col class And 5 pixel solid navy border for .col-auto class. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[Firefox]
Point as per the narration |
In this layout, the 1st row has a single column with heading.
The 2nd row has two columns with equal width. The 3rd row has three columns. In the 2nd column, width is set according to the content inside it. The remaining space is equally divided between 1st and 3rd columns. |
Using mouse, drag to change the size | By dragging the right border, we’ll increase and decrease the width of the screen.
Observe that the width of the columns also changes as per the size of the container. |
Slide: Column Class with Breakpoints
table1.png |
We can also create column class with breakpoints.
This table shows the .col classes for different breakpoints. They have 100% width until the breakpoint is reached. |
Slide: Column Class with Breakpoints
table2.png |
Similarly, these are the .col-auto classes for different breakpoints.
You can try these classes on your own. |
Slide: 12 Column Class | Next, we’ll learn how to create unequal width columns using a 12 column class.
|
Slide: 12 Column Class - Example
Example1.png Example2.png Example3.png |
Few columns can be combined to create a single column.
For example, .col-6 class is used to divide this row into two equal columns. In this case, .col-7 and .col-5 classes are used to divide this row into two unequal columns. Here .col-3, .col-4 & .col-5 classes are used to divide this row into 3 unequal columns. Notice that the sum of no. of columns should not be greater than 12. |
Switch to Mypage.html | Switch to the Mypage.html file. |
[gedit - Mypage.html]
Update: <div class="row"> <div class="col-3"> <ul> <a href="#"><li> Fruits & Vegetables </li></a> <a href="#"><li> Foodgrain </li></a> <a href="#"><li> Beverages </li></a> <a href="#"><li> Personal care </li></a> <a href="#"><li> Snacks & Branded Foods </li></a> </ul></div> <div class="col-9"> <h3> Welcome to Online Grocery Shopping!! </h3> <p> Buy your essentials at the lowest price. Choose from fresh produce to packaged goods and get them delivered straight to your doorstep. Shop for Rs.1000 and more to get FREE delivery. <p> </div></div> <div class="row"> <div class="col-3"> <h5> ABOUT BHARAT </h5> <p> About us <br> FAQ </p> </div> <div class="col-3"> <h5> PAYMENT AND SHIPPING </h5> <p> Payment Methods <br> Shipping Policy </p> </div> <div class="col-3"> <h5> CONTACT US </h5> <p> contact@bharat-online.com <br> 9000000001 </p> </div></div> |
In the 2nd row,for the 1st column change the column class to col-3.
For the 2nd column change the column class to col-9. For the 3rd row, change all the three column classes to col-3. |
Press Ctrl + S | Save the file. |
Switch to Mystyle.css | Switch to the Mystyle.css file. |
[gedit - Mystyle.css]
Update: .col-3, .col-9 {border: 2px dotted navy;} |
Next to the .col class, update the column classes as shown here.
For better clarity, we have set a 2 pixel dotted navy border for .col-3 & .col-9 classes. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page.
Let us see the changes in the layout. |
[Firefox]
Using mouse, by dragging change the size |
Notice that the 2nd row has unequal width columns of grid 3 and 9.
And the 3rd row has equal width columns, each of grid 3. By dragging the right border, we’ll increase and decrease the width of the screen. We see that the width of the columns also changes as per the size of the container. Note that the ratio of width of columns i.e 1:3 for 2nd row & 1:1:1 for 3rd row remains constant. |
Switch to Mypage.html | Switch to the Mypage.html file. |
[gedit - Mypage.html]
Update: <div class="col-10"> <h3> Welcome to Online Grocery Shopping!! </h3> <p> Buy your essentials at the lowest price. Choose from fresh produce to packaged goods and get them delivered straight to your doorstep. Shop for Rs.1000 and more to get FREE delivery. <p></div> |
What happens if the sum of no. columns is greater than 12?
Let’s check. For the 2nd row, change the 2nd column class to col-10 Notice that now the sum of no. of columns is 3+10=13, which is greater than 12. |
Press Ctrl + S | Save the file. |
Switch to Mystyle.css | Switch to the Mystyle.css file. |
[gedit - Mystyle.css]
Update: .col-3, .col-10 {border: 2px dotted navy;} |
Update the class as shown here
For better clarity, we have set a 2 pixel dotted navy border for .col-10 column class. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[Firefox] | Now the 2nd column is shifted to the next row.
This is because space is not enough for it. |
Slide: 12 Column Class with Breakpoints
table3.png |
We can also create a 12 column class with breakpoints.
Following are the 12 column classes for different breakpoints. They have 100% width until the breakpoint is reached. |
Switch to Mypage.html | Switch to the Mypage.html file. |
[gedit - Mypage.html]
Update: <div class="row"> <div class="col-md-3"> <ul> <a href="#"><li> Fruits & Vegetables </li></a> <a href="#"><li> Foodgrain </li></a> <a href="#"><li> Beverages </li></a> <a href="#"><li> Personal care </li></a> <a href="#"><li> Snacks & Branded Foods </li></a> </ul></div> <div class="col-md-9"> <h3> Welcome to Online Grocery Shopping!! </h3> <p> Buy your essentials at the lowest price. Choose from fresh produce to packaged goods and get them delivered straight to your doorstep. Shop for Rs.1000 and more to get FREE delivery. <p> </div></div> <div class="row"> <div class="col-md-3"> <h5> ABOUT BHARAT </h5> <p> About us <br> FAQ </p> </div> <div class="col-md-3"> <h5> PAYMENT AND SHIPPING </h5> <p> Payment Methods <br> Shipping Policy </p> </div> <div class="col-md-3"> <h5> CONTACT US </h5> <p> contact@bharat-online.com <br> 9000000001 </p> </div></div> |
Now we’ll see how this class behaves for Medium screen size.
In the 2nd row, for the 1st column change the column class to col-md-3. For the 2nd column change the column class to col-md-9. For the 3rd row, change the all three column classes to col-md-3. |
Press Ctrl + S | Save the file. |
Switch to Mystyle.css | Switch to the Mystyle.css file. |
[gedit - Mystyle.css]
Update: .col-md-3, .col-md-9 {border: 2px dashed navy;} |
Next to the .col class, update the column classes as shown here.
We have set a 2 pixel dashed navy border for .col-md-3 and .col-md-9 column classes. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[Firefox]
Using mouse, by dragging change the size |
By dragging the right border, we’ll decrease the width of the screen to below 768px. Now each column takes 100% width. |
Using mouse, by dragging change the size | Let’s increase the width of the screen to 768px or above.
Now the columns of 2nd and 3rd row are in 1:3 and 1:1:1 ratio respectively. So the column has 100% width until the Medium breakpoint is reached. |
You can also try a 12 column class with other breakpoints.
In this way we can create responsive website layouts with Bootstrap. | |
Only narration | With this we have come to the end of this tutorial.
Let us now summarize. |
Slide 6: Summary | In this tutorial, we have learnt:
|
Slide 8: Assignment | As an assignment-
|
Slide: About Spoken Tutorial project | The video at the following link summarises the Spoken Tutorial project.
Please download and watch it. |
Slide: Spoken Tutorial Workshops | The Spoken Tutorial Project team conducts workshops and gives certificates.
For more details, please write to us. |
Slide: Forum | Please post your timed queries on this forum. |
Slide: Acknowledgement | Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India. |
Slide: Thanks | This is Neha Solanki from Spoken Tutorial, IIT Bombay signing off.
Thanks for watching. |