View source for Bootstrap/C2/Margin-and-Padding-Classes-in-Bootstrap/English

'''Title of the script: '''Margin and Padding Classes 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, Margin and Padding Classes in Bootstrap, Margin Class, Padding Class



{| border="1"
|-
|  | '''Visual Cue'''
|  | '''Narration'''
|-
|  | Slide: Title
|  | Welcome to the Spoken Tutorial on '''“Margin and Padding Classes in Bootstrap”.'''
|-
|  | Slide 2: 

Learning Objectives
|  | In this tutorial, we will learn about:

* '''Margin classes''' and
* '''Padding classes'''

while designing a layout 
|-
|  | 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: Layout

Image1.png

|  | In this tutorial, we will design a '''layout''' as shown here.

We will see how to implement '''margin''' to the '''column''' of '''1st row''' and '''last row'''.

And '''padding''' to the '''columns''' of the '''2nd row'''.
|-
|  | Slide: Margin & Padding

|  | 
* '''Margin''' adds whitespace outside the border
* '''Padding '''adds whitespace inside the border
* '''Bootstrap '''has various '''margin''' and '''padding classes'''.

|-
|  | Slide: Margin & Padding Classes- Format
|  | 
* User has to follow the below format for naming the '''margin''' and '''padding''' '''classes'''

|-
|  | Slide: Property

[Table1]
|  | Here, '''property''' can be either '''m''' to set '''margin''' or '''p''' to set '''padding'''.
|-
|  | Slide: Sides

[Table2]
|  | '''Sides''' specifies on which side of the element the '''margin''' or '''padding''' will be added.

'''Sides '''should be one of the following.
|-
|  | Slide: Size

[Table3]

|  | '''Size''' specifies how much '''margin''' or '''padding''' will be added.

'''Size '''should be one of the following.
|-
|  | Only narration
|  | Now let’s understand all these with some examples.
|-
|  | 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.

|-
|  | Open the file in text editor
|  | Open the file '''Mypage.html''' in the '''text editor.'''

First we will see how to use the''' margin classes'''.
|-
|  | [gedit - Mypage.html]

Update:
<pre>
<div class="row">

<div class="col m-4">

<h1 class="text-danger"> Bharat Mart </h1>

</div>

</div>
</pre>
|  | In the '''1st row''', for column add''' .m-4''' class as shown here.

Here the format is specified with '''Property''' as '''m''', '''sides''' as '''blank '''and '''size''' as '''4'''.

This''' class''' will set the '''margin '''of '''1.5rem '''on all 4 sides of the column.
|-
|  | Press Ctrl + S
|  | Save the file.
|-
|  | Point to Mypage.html Downloads folder

Open Mypage.html in Firefox
|  | Open the file '''Mypage.html''' in a '''web browser'''.
|-
|  | [Firefox]

Highlight the output
|  | Now the '''margin''' is added to all 4 sides of the column of the '''1st row'''.
|-
|  | Text Box on the screen[

1.5 X Browser's default font size]
|  | Let’s check how much '''margin''' is added.

'''Margin''' added is '''1.5''' multiplied by the '''browser's''' default font size.
|-
|  | 
|  | Let’s find out what is the '''browser's''' default font size.
|-
|  | Open '''Menu'''>> click on '''Preferences'''

Under''' Font and Color'''>> point to''' 16px '''

Text Box on the screen[

1.5 X 16px = 24px]
|  | Open '''Menu'''at top right of this browser.

Click on '''Preferences.'''

Under''' Font and Color,''' we can see that '''16px '''is the '''browser's''' default font size.

So the '''margin''' added is '''1.5''' multiplied by '''16px''' equals to '''24px'''.
|-
|  | 
|  | Next, let’s see how this page behaves in '''responsive mode''' after '''margin class'''.
|-
|  | Textbox [Press Ctrl+Shift+C]

Right click >> Inspect Element
|  | Press '''Ctrl+Shift+C '''or right click on the page and select '''“Inspect Element”.'''

The '''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''' and we can change the size of the screen.
|-
|  | Using mouse, by dragging change the size
|  | By dragging the right border, we’ll increase and decrease the width of the screen.

Observe that there is no change in the '''margin'''.

So we can say that whatever is the size of screen, '''margin''' is added.

Lets see one more example of margin class.
|-
|  | Switch to Mypage.html
|  | Switch to the '''Mypage.html''' file.
|-
|  | [gedit - Mypage.html]

Type:
<pre>
<div class="row">

<div class="col">

<div style="width: 120px; border: 2px solid green;">

Copyright- 2021

</div>

</div>

</div>
</pre>
|  | We’ll add one more '''row''' at the end.

Type the code as shown.

We have created a row, with one column inside it.

In the column we have created a '''block.'''

Using '''style''' attributes, we have set some '''inline styles''' like '''width''' and '''border'''.
|-
|  | Press Ctrl + S
|  | Save the file.
|-
|  | Switch to firefox
|  | Switch to the '''browser''' and refresh the page.
|-
|  | [Firefox]

Highlight the output

|  | We can observe a new row is added at the end.

Using '''margin classes''', we can horizontally center this '''block-level '''element.
|-
|  | Switch to Mypage.html
|  | Switch to the '''Mypage.html''' file.
|-
|  | [gedit - Mypage.html]

Type:
<pre>
<div class="row">

<div class="col">

<div class="mx-auto" style="width: 120px; border: 2px solid green;">

Copyright- 2021

</div>

</div>

</div>
</pre>
|  | Add the '''.mx-auto''' '''margin class''' as shown here.

Here the format is specified with '''Property''' as '''m''', '''sides''' as '''x '''and''' size '''as''' auto'''

This''' class''' will set the '''auto''' '''margin '''on '''left''' and '''right''' sides of the '''block'''
|-
|  | Press Ctrl + S
|  | Save the file.
|-
|  | Switch to firefox
|  | Switch to the '''browser''' and refresh the page.
|-
|  | [Firefox]

Highlight the output
|  | Observe the last '''row''', now the '''block''' is horizontally centered.

This is because the '''margin''' is added to the '''left''' and '''right''' sides of the '''block.'''

Please try other '''margin classes''' on your own.

Next, let’s see '''padding classes.'''
|-
|  | Switch to Mypage.html
|  | Switch to the '''Mypage.html''' file.
|-
|  | [gedit - Mypage.html]

Update:
<pre>
<div class="row">

<div class="col-sm-3 order-sm-last pt-5">

<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-sm-9 pt-5">

<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>
</pre>
|  | In the '''2nd row''', for both the '''columns''', add '''.pt-5 class''' as shown here.

Here the format is specified with '''Property''' as '''p''', '''sides''' as '''t '''and''' size '''as''' 5'''

This '''class''' will set '''padding''' of '''3rem''' at the '''top''' of the columns.
|-
|  | Press Ctrl + S
|  | Save the file.
|-
|  | Switch to firefox
|  | Switch to the '''browser''' and refresh the page.
|-
|  | [Firefox]

Text Box on the screen-

[Browser's default font size is 16px.

3 X 16px = 48px]

Using mouse, by dragging change the size

|  | 

We can observe that''' padding''' is added at the top of both the columns.

Here, '''browser’s''' default font size is 16px, so '''3rem''' is 3 multiplied by '''16px''' which is '''48px.'''

Hence a '''padding''' of '''48px''' is added at the top.

Observe that by default column has some '''left''' and '''right padding'''.

By dragging the right border, we’ll increase and decrease the width of the screen.

Observe that the top '''padding''' is still added to the columns.

So, whatever is the size of the screen, the '''padding''' is added.

We can use '''margin''' and '''padding classes''' with a '''breakpoint'''.
|-
|  | Slide: Margin and Padding classes with Breakpoints

|  | Users have to follow these formats for naming '''margin''' and '''padding''' '''classes''' with '''Breakpoints'''.

* This is the format for '''xs''' '''breakpoint'''
* This is the format for '''sm, md, lg '''&''' xl breakpoints'''

|-
|  | 
|  | Let’s use '''padding class''' with '''breakpoints'''.
|-
|  | Switch to Mypage.html
|  | Switch to the '''Mypage.html '''file.
|-
|  | [gedit - Mypage.html]

Update:
<pre>
<div class="row">

<div class="col-sm-3 order-sm-last pt-sm-5">

<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-sm-9 pt-sm-5">

<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>
</pre>
|  | In the '''2nd row''', for both the '''columns''', change the '''padding''' '''class''' to '''.pt-sm-5''' as shown here.

Here, format is specified with '''Property''' as '''p''', '''sides''' as '''t, breakpoint '''as '''sm '''and''' size '''as '''5.'''

This '''class''' adds a '''padding''' of '''3rem '''to the '''top''' for screen size '''Small''' and above.
|-
|  | 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

|  | Observe that now '''padding''' is not added to the columns.

This is because the width of the screen is below '''576px.'''

By dragging the right border, we’ll increase the width of the screen to above '''576px.'''

Observe that now '''padding''' is added to the columns.

So we can conclude that '''padding''' is added for screen size '''Small''' and above.

You can try other '''padding classes''' on your own.
|-
|  | 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 about:

* '''Margin classes''' and
* '''Padding classes'''

while designing a '''layout''' 
|-
|  | Slide 8: Assignment
|  | As an assignment-

* Open the '''Mypage.html''' file
* For the '''column''' of '''1st row '''change the '''margin class''' to '''.m-sm-4.'''
* 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.
|-
|}