Bootstrap/C2/Grid-System-in-Bootstrap/English

From Script | Spoken-Tutorial
Jump to: navigation, search

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:
  • Row class
  • Column class
  • Column class with breakpoints
  • 12 Column class
  • 12 Column class with breakpoints
Slide 3:

System Requirements

This tutorial is recorded using,
  • Ubuntu Linux OS v 18.04
  • Bootstrap 4.6.0
  • HTML5
  • CSS3
  • gedit Text Editor and
  • Firefox web browser
Slide 4: Prerequisite

https://spoken-tutorial.org

  • To follow this tutorial, you should be familiar with HTML and CSS.
  • If not, please go through the HTML and CSS tutorials on this website.
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
  • The files used in this tutorial are available in the Code Files link on this tutorial page.
  • Please download and extract them.
  • Make a copy and then use them while practising.
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
  • .col class is used to create columns of equal width.
  • .col-auto class is used to create columns that have width according to the content inside it.

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.
  • A row is divided into 12 equal width columns.
  • .col-{*} class is used to create columns of equal and unequal widths.
  • * represents the number of columns out of 12.
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:
  • Row class
  • Column class
  • Column class with breakpoints
  • 12 Column class
  • 12 Column class with breakpoints
Slide 8: Assignment As an assignment-
  • Open the Mypage.html file.
  • For 2nd row change the column class to
    • .col-sm-3 for 1st column.
    • .col-sm-9 for 2nd column.
  • For 3rd row change all the column class to .col-sm-3.
  • Open the Mystyle.css file.
  • Set 2px solid navy border for .col-sm-3 and .col-sm-9 classes.
  • Save both the files.
  • Observe the output on the web browser.
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.

Contributors and Content Editors

Nehasolanki

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Bootstrap/C2/Grid-System-in-Bootstrap/English&oldid=55007"