Difference between revisions of "Bootstrap/C2/Margin-and-Padding-Classes-in-Bootstrap/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of the script: '''Margin and Padding Classes in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''K...")
 
 
Line 27: Line 27:
 
* '''Padding classes'''
 
* '''Padding classes'''
  
−
while designing a layout  
+
while designing a '''layout'''
 
|-
 
|-
 
|  | Slide 3:  
 
|  | Slide 3:  
Line 128: Line 128:
 
</div>
 
</div>
 
</pre>
 
</pre>
−
|  | In the '''1st row''', for column add''' .m-4''' class as shown here.
+
|  | 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'''.
 
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.
+
This''' class''' will set the '''margin '''of '''1.5 rem '''on all 4 sides of the column.
 
|-
 
|-
 
|  | Press Ctrl + S
 
|  | Press Ctrl + S
Line 164: Line 164:
  
 
1.5 X 16px = 24px]
 
1.5 X 16px = 24px]
−
|  | Open '''Menu'''at top right of this browser.
+
|  | Open '''Menu''' at top right of this browser.
  
 
Click on '''Preferences.'''
 
Click on '''Preferences.'''
Line 178: Line 178:
  
 
Right click >> Inspect Element
 
Right click >> Inspect Element
−
|  | Press '''Ctrl+Shift+C '''or right click on the page and select '''“Inspect Element”.'''
+
|  | Press '''Ctrl+Shift+C '''or right-click on the page and select '''“Inspect Element”.'''
  
 
The '''Inspect Element window '''opens.
 
The '''Inspect Element window '''opens.
Line 197: Line 197:
 
So we can say that whatever is the size of screen, '''margin''' is added.
 
So we can say that whatever is the size of screen, '''margin''' is added.
  
−
Lets see one more example of margin class.
+
Let's see one more example of '''margin class'''.
 
|-
 
|-
 
|  | Switch to Mypage.html
 
|  | Switch to Mypage.html
Line 228: Line 228:
 
In the column we have created a '''block.'''
 
In the column we have created a '''block.'''
  
−
Using '''style''' attributes, we have set some '''inline styles''' like '''width''' and '''border'''.
+
Using '''style attributes''', we have set some '''inline styles''' like '''width''' and '''border'''.
 
|-
 
|-
 
|  | Press Ctrl + S
 
|  | Press Ctrl + S
 
|  | Save the file.
 
|  | Save the file.
 
|-
 
|-
−
|  | Switch to firefox
+
|  | Switch to Firefox
 
|  | Switch to the '''browser''' and refresh the page.
 
|  | Switch to the '''browser''' and refresh the page.
 
|-
 
|-
Line 242: Line 242:
 
|  | We can observe a new row is added at the end.
 
|  | We can observe a new row is added at the end.
  
−
Using '''margin classes''', we can horizontally center this '''block-level '''element.
+
Using '''margin classes''', we can horizontally-center this '''block-level '''element.
 
|-
 
|-
 
|  | Switch to Mypage.html
 
|  | Switch to Mypage.html
Line 265: Line 265:
 
</div>
 
</div>
 
</pre>
 
</pre>
−
|  | Add the '''.mx-auto''' '''margin class''' as shown here.
+
|  | 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'''
+
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'''
+
This''' class''' will set the '''auto margin '''on left and right sides of the '''block'''.
 
|-
 
|-
 
|  | Press Ctrl + S
 
|  | Press Ctrl + S
 
|  | Save the file.
 
|  | Save the file.
 
|-
 
|-
−
|  | Switch to firefox
+
|  | Switch to Firefox
 
|  | Switch to the '''browser''' and refresh the page.
 
|  | Switch to the '''browser''' and refresh the page.
 
|-
 
|-
Line 280: Line 280:
  
 
Highlight the output
 
Highlight the output
−
|  | Observe the last '''row''', now the '''block''' is horizontally centered.
+
|  | 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.'''
+
This is because the '''margin''' is added to the left and right sides of the '''block.'''
  
 
Please try other '''margin classes''' on your own.
 
Please try other '''margin classes''' on your own.
Line 328: Line 328:
 
</div>
 
</div>
 
</pre>
 
</pre>
−
|  | In the '''2nd row''', for both the '''columns''', add '''.pt-5 class''' as shown here.
+
|  | 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'''
 
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.
+
This '''class''' will set a '''padding''' of '''3 rem''' at the top of the columns.
 
|-
 
|-
 
|  | Press Ctrl + S
 
|  | Press Ctrl + S
Line 354: Line 354:
 
We can observe that''' padding''' is added at the top of both the columns.
 
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.'''
+
Here, '''browser’s''' default font size is 16px, so '''3 rem''' is 3 multiplied by '''16px''' which is '''48px.'''
  
 
Hence a '''padding''' of '''48px''' is added at the top.
 
Hence a '''padding''' of '''48px''' is added at the top.
  
−
Observe that by default column has some '''left''' and '''right padding'''.
+
Observe that by default, the column has some left and right '''padding'''.
  
 
By dragging the right border, we’ll increase and decrease the width of the screen.
 
By dragging the right border, we’ll increase and decrease the width of the screen.
Line 365: Line 365:
  
 
So, whatever is the size of the screen, the '''padding''' is added.
 
So, whatever is the size of the screen, the '''padding''' is added.
−
 
+
|-
−
We can use '''margin''' and '''padding classes''' with a '''breakpoint'''.
+
|  |
 +
|  | We can use '''margin''' and '''padding classes''' with a '''breakpoint'''.
 
|-
 
|-
 
|  | Slide: Margin and Padding classes with Breakpoints
 
|  | Slide: Margin and Padding classes with Breakpoints
  
−
|  | Users have to follow these formats for naming '''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 '''extra-small  breakpoint'''
−
* This is the format for '''sm, md, lg '''&''' xl breakpoints'''
+
* This is the format for '''small, medium, large '''and''' extra-large breakpoints'''
  
 
|-
 
|-
Line 419: Line 420:
 
</div>
 
</div>
 
</pre>
 
</pre>
−
|  | In the '''2nd row''', for both the '''columns''', change the '''padding''' '''class''' to '''.pt-sm-5''' as shown here.
+
|  | 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.'''
+
Here, format is specified with '''Property''' as '''p''', '''sides''' as '''t, breakpoint '''as '''small '''and''' size '''as '''5.'''
  
−
This '''class''' adds a '''padding''' of '''3rem '''to the '''top''' for screen size '''Small''' and above.
+
This '''class''' adds a '''padding''' of '''3 rem '''to the top, for screen size '''small''' and above.
 
|-
 
|-
 
|  | Press Ctrl + S
 
|  | Press Ctrl + S
 
|  | Save the file.
 
|  | Save the file.
 
|-
 
|-
−
|  | Switch to firefox
+
|  | Switch to Firefox
 
|  | Switch to the '''browser''' and refresh the page.
 
|  | Switch to the '''browser''' and refresh the page.
 
|-
 
|-
Line 443: Line 444:
 
Observe that now '''padding''' is added to the columns.
 
Observe that now '''padding''' is added to the columns.
  
−
So we can conclude that '''padding''' is added for screen size '''Small''' and above.
+
So we can conclude that '''padding''' is added for the screen size '''small''' and above.
  
 
You can try other '''padding classes''' on your own.
 
You can try other '''padding classes''' on your own.

Latest revision as of 15:16, 28 April 2021

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


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: 

<div class="row">

<div class="col m-4">

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

</div>

</div>
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.5 rem 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.

Let's see one more example of margin class.

Switch to Mypage.html Switch to the Mypage.html file.
[gedit - Mypage.html]

Type: 

<div class="row">

<div class="col">

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

Copyright- 2021

</div>

</div>

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

<div class="row">

<div class="col">

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

Copyright- 2021

</div>

</div>

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

<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>
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 a padding of 3 rem 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 3 rem is 3 multiplied by 16px which is 48px.

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

Observe that by default, the 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 extra-small breakpoint
  • This is the format for small, medium, large and extra-large breakpoints
Let’s use padding class with breakpoints.
Switch to Mypage.html Switch to the Mypage.html file.
[gedit - Mypage.html]

Update: 

<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>
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 small and size as 5.

This class adds a padding of 3 rem 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 the 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.

Contributors and Content Editors

Nancyvarkey, Nehasolanki

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Bootstrap/C2/Margin-and-Padding-Classes-in-Bootstrap/English&oldid=55046"