Nehasolanki: Created page with "'''Title of the script: '''Grid System in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Keywords: '''Boo..."

2021-04-07T10:07:18Z

Created page with "'''Title of the script: '''Grid System in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Keywords: '''Boo..."

New page

'''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.

{| border="1"
|-
| | '''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:

<nowiki><div class="row"> Header </div></nowiki>

<nowiki><div class="row"> Content </div></nowiki>

<nowiki><div class="row"> Footer </div></nowiki>
| | Replace the '''<nowiki><h1> tag</nowiki>''' with the code as shown here.

Inside the '''container''', there are three '''<nowiki><div></nowiki>''' 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:

<pre><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></pre>
| | 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 '''.co'''l '''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.
* '''<nowiki>*</nowiki>''' 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:

<pre><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></pre>
| | 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:

<pre><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></pre>
| | 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:

<pre><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></pre>
| | 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.
|-
|}

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

Nehasolanki: Created page with "'''Title of the script: '''Grid System in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Keywords: '''Boo..."