Difference between revisions of "Bootstrap/C2/Order-and-Offset-Classes-in-Bootstrap/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of the script: '''Order and Offset Classes in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Key...")
 
 
Line 27: Line 27:
 
* '''Offset classes'''
 
* '''Offset classes'''
  
−
while designing a layout
+
while designing a '''layout'''.
 
|-
 
|-
 
|  | Slide 3:  
 
|  | Slide 3:  
Line 58: Line 58:
 
|  | In this tutorial, we will design a '''layout''' as shown here.
 
|  | In this tutorial, we will design a '''layout''' as shown here.
  
−
We will see how to implement '''order''' and '''offset''' '''classes''' to the columns of 2nd & 3rd rows.
+
We will see how to implement '''order''' and '''offset classes''' to the columns of 2nd & 3rd rows.
 
|-
 
|-
 
|  | Slide: Order Classes
 
|  | Slide: Order Classes
 
|  | Let’s start with '''order classes'''.
 
|  | Let’s start with '''order classes'''.
  
−
* '''Order''' '''classes''' are used to manage the visual order of the '''HTML''' elements.
+
* '''Order classes''' are used to manage the visual order of the '''HTML''' elements.
 
* Following are the '''order classes''':
 
* Following are the '''order classes''':
 
** '''.order-first: '''sets the visual order to first
 
** '''.order-first: '''sets the visual order to first
Line 75: Line 75:
 
|  | '''Order classes '''are also set with '''breakpoints'''.
 
|  | '''Order classes '''are also set with '''breakpoints'''.
  
−
Following are the''' .order''' '''classes''' for different '''breakpoints'''.
+
Following are the''' .order classes''' for different '''breakpoints'''.
 
|-
 
|-
 
|  | Only narration
 
|  | Only narration
Line 84: Line 84:
 
|  | Locate the files '''Mypage.html''' and '''Mystyle.css''' in the '''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.
+
We will use '''Mypage.html''' and '''Mystyle.css files '''which we saved earlier for this demonstration.
 
|-
 
|-
 
|  | Slide 5: Code Files
 
|  | Slide 5: Code Files
Line 166: Line 166:
 
|  | First we will add the '''order class''' in this code.
 
|  | First we will add the '''order class''' in this code.
  
−
For the 2nd row 1st column, add '''order-sm-last''' '''class''' as shown.
+
 
 +
 
 +
For the 2nd row 1st column, add '''order-sm-last class''' as shown.
 +
 
  
 
'''sm '''specifies the '''Small''' screen size.
 
'''sm '''specifies the '''Small''' screen size.
 +
 +
  
 
This will set the visual order of the first column to the last.
 
This will set the visual order of the first column to the last.
 +
 +
  
 
Next we’ll set the '''order class''' for the 3rd row which contains 3 columns as shown.
 
Next we’ll set the '''order class''' for the 3rd row which contains 3 columns as shown.
Line 179: Line 186:
  
 
3rd column with '''order-1''' '''class'''
 
3rd column with '''order-1''' '''class'''
 +
  
 
Here we have changed the visual order to 3, 2 and 1.
 
Here we have changed the visual order to 3, 2 and 1.
Line 207: Line 215:
 
That is, the 1st column became the 3rd and 3rd column became 1st.
 
That is, the 1st column became the 3rd and 3rd column became 1st.
  
−
In the 2nd row, the visual order of the 1st column which consists of links is moved to last.
+
 
 +
 
 +
In the 2nd row, the visual order of the 1st column which consists of '''links''', is moved to last.
 +
 
 +
 
  
 
Let’s see how this page behaves in responsive mode after using '''order class'''.
 
Let’s see how this page behaves in responsive mode after using '''order class'''.
 +
  
 
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.
 +
  
 
Press '''Ctrl+Shift+M '''or click on the '''“Responsive Design Mode” '''at the bottom right.
 
Press '''Ctrl+Shift+M '''or click on the '''“Responsive Design Mode” '''at the bottom right.
 +
  
 
Now the page is in '''responsive mode''', so we can change the size of the screen.
 
Now the page is in '''responsive mode''', so we can change the size of the screen.
Line 226: Line 242:
 
|  | So we can conclude that its '''order''' is set to last for screen size '''Small''' and above.
 
|  | So we can conclude that its '''order''' is set to last for screen size '''Small''' and above.
  
−
You can also try '''.order''' '''classes''' with other '''breakpoints'''.
+
You can also try '''.order classes''' with other '''breakpoints'''.
 
|-
 
|-
 
|  |  
 
|  |  
Line 233: Line 249:
 
|  | Slide: Offset Classes
 
|  | Slide: Offset Classes
 
|  |
 
|  |
−
* '''Offset''' '''classes''' are used to increase the left margin of the '''HTML''' elements.
+
* '''Offset classes''' are used to increase the left margin of the '''HTML''' elements.
−
* The class''' .offset-*''' increase the left margin by * grid columns
+
* The '''class .offset-*''' increase the left margin by * grid columns
−
* Here, '''<nowiki>*</nowiki>''' represents any grid number between 1 to 11.
+
* Here, '''*''' represents any grid number between 1 to 11.
  
 
|-
 
|-
Line 276: Line 292:
 
</div>
 
</div>
 
</pre>
 
</pre>
−
|  | In the 3rd row, add the''' offset-1''' '''class''' to all the columns, as shown.
+
|  | Add the''' offset-1 class''' to all the columns in the 3rd row, as shown.
 +
 
  
 
Here 1 represents 1 grid column and this '''class''' provides the left margin by default.
 
Here 1 represents 1 grid column and this '''class''' provides the left margin by default.
Line 293: Line 310:
  
 
So we can say that each column has shifted to the right by 1 grid column.
 
So we can say that each column has shifted to the right by 1 grid column.
 +
  
 
By dragging the right border, we will increase the width of the screen.
 
By dragging the right border, we will increase the width of the screen.
Line 303: Line 321:
 
|  | '''Offset classes''' can also be set with '''breakpoints'''.
 
|  | '''Offset classes''' can also be set with '''breakpoints'''.
  
−
Following are the '''.offset''' '''classes''' for different '''breakpoints'''.
+
Following are the '''.offset classes''' for different '''breakpoints'''.
 
|-
 
|-
 
|  | Only narration
 
|  | Only narration
Line 362: Line 380:
 
By dragging the right border, we’ll decrease the width of the screen to below '''576px.'''
 
By dragging the right border, we’ll decrease the width of the screen to below '''576px.'''
  
−
Now the margin of 1 grid column is not set.
+
Now the margin of 1 grid column is not '''set'''.
 +
 
  
 
So we can say that the '''offset''' is set for screen size '''Small '''and above.
 
So we can say that the '''offset''' is set for screen size '''Small '''and above.
  
−
You can also try '''.offset''' '''class''' with other '''breakpoints'''.
+
You can also try '''.offset class''' with other '''breakpoints'''.
 
|-
 
|-
 
|  |  
 
|  |  
−
|  | This is the final '''layout''' which we have designed using '''order''' and '''offset''' '''classes'''.
+
|  | This is the final '''layout''' which we have designed using '''order''' and '''offset classes'''.
 
|-
 
|-
 
|  | Only narration
 
|  | Only narration

Latest revision as of 12:41, 19 April 2021

Title of the script: Order and Offset 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, Order and Offset Classes in Bootstrap, Order class, Offset class


Visual Cue Narration
Slide: Title Welcome to the Spoken Tutorial on “Order and Offset classes in Bootstrap”.
Slide 2:

Learning Objectives

In this tutorial, we will learn about:
  • Order classes and
  • Offset 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

Highlight 2nd and 3rd rows

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

We will see how to implement order and offset classes to the columns of 2nd & 3rd rows.

Slide: Order Classes Let’s start with order classes.
  • Order classes are used to manage the visual order of the HTML elements.
  • Following are the order classes:
    • .order-first: sets the visual order to first
    • .order-last: sets the visual order to last
    • .order-*: sets the visual order by grid numbers from 0 to 12.
Slide: Order Classes with Breakpoints

table1.png

Order classes are also set with breakpoints.

Following are the .order classes for different breakpoints.

Only narration Let’s understand .order classes with an example.
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.
[gedit - Mypage.html]

Update: 

<div class="row">

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

<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">

<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-sm-3 order-3">

<h5> ABOUT BHARAT </h5>

<p> About us <br> FAQ </p>

</div>

<div class="col-sm-3 order-2">

<h5> PAYMENT AND SHIPPING </h5>

<p> Payment Methods <br> Shipping Policy </p>

</div>

<div class="col-sm-3 order-1">

<h5> CONTACT US </h5>

<p> contact@bharat-online.com <br> 9000000001 </p>

</div>

</div>
First we will add the order class in this code.


For the 2nd row 1st column, add order-sm-last class as shown.


sm specifies the Small screen size.


This will set the visual order of the first column to the last.


Next we’ll set the order class for the 3rd row which contains 3 columns as shown.

i.e 1st column with order-3 class

2nd column with order-2 class

3rd column with order-1 class


Here we have changed the visual order to 3, 2 and 1.

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]

Textbox [Press Ctrl+Shift+C]</div>

Right click >> Inspect Element

Textbox [Press Ctrl+Shift+M]</div>

Click on Responsive Design Mode

Using mouse, by dragging change the size

In the 3rd row, we see that the visual order of the columns has changed accordingly.

That is, the 1st column became the 3rd and 3rd column became 1st.


In the 2nd row, the visual order of the 1st column which consists of links, is moved to last.


Let’s see how this page behaves in responsive mode after using order class.


Press Ctrl+Shift+C or right-click on the page and select “Inspect Element”.


The Inspect Element window opens.


Press Ctrl+Shift+M or click on the “Responsive Design Mode” at the bottom right.


Now the page is in responsive mode, so we can change the size of the screen.

By dragging the right border, we’ll decrease the width of the screen to below 576px.

Observe that now the column that consists of links, is at the first in this row.

So we can conclude that its order is set to last for screen size Small and above.

You can also try .order classes with other breakpoints.

Next we’ll learn about offset classes.
Slide: Offset Classes
  • Offset classes are used to increase the left margin of the HTML elements.
  • The class .offset-* increase the left margin by * grid columns
  • Here, * represents any grid number between 1 to 11.
Only narration Let’s understand .offset classes with an example.
Switch to Mypage.html Switch to the Mypage.html file in the text editor.
[gedit - Mypage.html]

Update: 

<div class="row">

<div class="col-sm-3 order-3 offset-1">

<h5> ABOUT BHARAT </h5>

<p> About us <br> FAQ </p>

</div>

<div class="col-sm-3 order-2 offset-1">

<h5> PAYMENT AND SHIPPING </h5>

<p> Payment Methods <br> Shipping Policy </p>

</div>

<div class="col-sm-3 order-1 offset-1">

<h5> CONTACT US </h5>

<p> contact@bharat-online.com <br> 9000000001 </p>

</div>

</div>
Add the offset-1 class to all the columns in the 3rd row, as shown.


Here 1 represents 1 grid column and this class provides the left margin by default.

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

We see that the margin of 1 grid column is added to the left of each of the three columns.

So we can say that each column has shifted to the right by 1 grid column.


By dragging the right border, we will increase the width of the screen.

At every screen size, offset remains the same.

Slide: Offset Class with Breakpoints

table2.png

Offset classes can also be set with breakpoints.

Following are the .offset classes for different breakpoints.

Only narration Now let’s understand this with an example.
Switch to Mypage.html Switch to the Mypage.html file.
[gedit - Mypage.html]

Update: 

<div class="row">

<div class="col-sm-3 order-3 offset-sm-1">

<h5> ABOUT BHARAT </h5>

<p> About us <br> FAQ </p>

</div>

<div class="col-sm-3 order-2 offset-sm-1">

<h5> PAYMENT AND SHIPPING </h5>

<p> Payment Methods <br> Shipping Policy </p>

</div>

<div class="col-sm-3 order-1 offset-sm-1">

<h5> CONTACT US </h5>

<p> contact@bharat-online.com <br> 9000000001 </p>

</div>

</div>
We will look for Small breakpoint.

In the 3rd row, update the offset class for all the columns to offset-sm-1 as shown.

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 the margin of 1 grid column is set before all the three columns.

By dragging the right border, we’ll decrease the width of the screen to below 576px.

Now the margin of 1 grid column is not set.


So we can say that the offset is set for screen size Small and above.

You can also try .offset class with other breakpoints.

This is the final layout which we have designed using order and offset classes.
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:
  • Order classes and
  • Offset classes

while designing a layout

Slide 8: Assignment Do the below assignment-
  • In MyPage.html file, change the order class for 3rd row with:
    • .order-sm-3 for 1st column
    • .order-sm-2 for 2nd column
    • .order-sm-1 for 3rd column
  • 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/Order-and-Offset-Classes-in-Bootstrap/English&oldid=55013"