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
| 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:
while designing a layout |
| Slide 3:
System Requirements |
This tutorial is recorded using,
|
| Slide 4: Prerequisite |
|
| 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 |
|
| Slide: Margin & Padding Classes- Format |
|
| 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 |
|
| 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.
|
| 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:
while designing a layout |
| 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. |
