Bootstrap/C2/Horizontal-and-Vertical-Alignment-Classes-in-Bootstrap/English

From Script | Spoken-Tutorial
Revision as of 20:45, 11 May 2021 by Nehasolanki (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Title of the script: Horizontal and Vertical Alignment 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, Horizontal and Vertical Alignment Classes in Bootstrap, justify-content classes, align-items classes, align-self classes


Visual Cue Narration
Slide: Title Welcome to the Spoken Tutorial on “Horizontal and Vertical Alignment Classes in Bootstrap”
Slide 2:

Learning Objectives

In this tutorial, we will learn about:
  • Horizontal alignment classes and
  • Vertical alignment classes

for aligning columns in a row

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 3rd row

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

Bootstrap has various horizontal and vertical alignment classes.

Let’s learn how to implement horizontal and vertical alignment classes in the 3rd row.

Slide: Horizontal Alignment Classes First let’s understand horizontal alignment classes.

justify-content classes are used for horizontal alignment.

These are:

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
Slide: justify-content Classes

Image2.png

Highlight the image according to the narration

Now let’s understand these classes one by one.
  • In .justify-content-start class, we see all columns shift to the start of the row
  • In .justify-content-end class, all columns shift to the end of the row
  • In .justify-content-center class, all columns shift to the center of the row
  • Next class is .justify-content-between class. Here the extra space is equally divided in between amongst all the columns of the row
  • And in .justify-content-around class, every column has equal left and right space around them
Let’s use one of these classes in our 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: 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 Mypage.html in gedit Open the file Mypage.html in the text editor.

I have opened it in the gedit Text Editor.

[gedit - Mypage.html]

Update: 

<div class="row" style="height: 160px;">

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

<h5> ABOUT BHARAT </h5>

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

</div>

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

<h5> PAYMENT AND SHIPPING </h5>

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

</div>

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

<h5> CONTACT US </h5>

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

</div></div>
In the 3rd row, we have removed the order and offset classes from all the three columns.

And we have added some height to this row using the style attribute.

So we can see the horizontal alignment of columns very clearly.

Press Ctrl + S Save the file.
Open Mypage.html in Firefox Open the file Mypage.html in a web browser.
[Firefox]

Highlight the output

Notice that order and offset have been removed from all columns of the 3rd row.

And the height of the row has increased.

Now let us see how we can add horizontal alignment class to the 3rd row.

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

Highlight: 

<div class="row justify-content-between" style="height: 160px;">

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

<h5> ABOUT BHARAT </h5>

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

</div>

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

<h5> PAYMENT AND SHIPPING </h5>

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

</div>

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

<h5> CONTACT US </h5>

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

</div></div>
In the 3rd row, add .justify-content-between class as shown here.
Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the 3rd row.

The extra space is equally divided in between amongst all the columns of this row.

Only narration You can try other horizontal classes later for your own understanding.
Slide: Vertical Alignment Classes Now let’s understand vertical alignment classes.
Slide: Vertical Alignment Classes
  • align-items classes
  • align-self classes

are used for vertical alignments

Slide : align-items Classes These are different types of align-items classes:


  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
Slide : align-items Classes

Image3.png

Highlight 1

Highlight 2


Highlight 3


Highlight 4


Highlight 1,2,3,4


Highlight 5

Now let’s understand these classes one by one.
  • In .align-items-start, columns are aligned from the top of the row
  • In .align-items-end, columns are aligned from the bottom of the row
  • In .align-items-center, columns are aligned to the center of the row
  • And in .align-items-baseline, columns are aligned according to the first line

i.e baseline of every column

For the first 4 align-items classes, the height of the column is adjusted according to the content.

  • Lastly in .align-items-stretch, the column height is stretched to the height of the parent row.
Let’s use one of these classes in our layout.
Switch to Mypage.html Switch to the Mypage.html file.
[gedit - Mypage.html]

Highlight: 

<div class="row justify-content-between align-items-end"
style="height: 160px;">

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

<h5> ABOUT BHARAT </h5>

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

</div>

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

<h5> PAYMENT AND SHIPPING </h5>

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

</div>

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

<h5> CONTACT US </h5>

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

</div></div>
In the 3rd row, add .align-items-end class as shown here.
Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the 3rd row.

Now the height of all columns is adjusted according to the content in them.

And they are aligned from the bottom of the row.

Only narration You can try other align-items classes later for your own understanding.
Slide: align-items Classes

Image3.png

We saw that align-items class is used to apply the same vertical alignment to all the columns.
Slide: Different vertical alignment for different columns

Image4.png

But what if we want different vertical alignment for different columns?
Slide : align-self Classes This can be achieved by using align-self classes.

These are different types of align-self classes:

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch

These work the same like align-items classes but are applied to an individual column.

Only narration Now let’s understand these classes with examples.
Slide : align-self classes

Image5.png

In this row, all columns have different vertical alignment classes.
Let’s use some of these classes in our layout.
Switch to Mypage.html Switch to the Mypage.html file.
[gedit - Mypage.html]

Highlight: 

<div class="row justify-content-between" style="height: 160px;">

<div class="col-sm-3 align-self-start">

<h5> ABOUT BHARAT </h5>

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

</div>

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

<h5> PAYMENT AND SHIPPING </h5>

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

</div>

<div class="col-sm-3 align-self-end">

<h5> CONTACT US </h5>

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

</div></div>
In the 3rd row, remove .align-items-end class.

In the 1st column, add .align-self-start class.

And in the 3rd column, add .align-self-end class as shown here.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the 3rd row.

The height of 1st and 3rd columns are adjusted according to the content.

The 1st column is aligned to the top and the 3rd column is aligned to the bottom of the row.

Only narration You can try other align-self classes later for your own understanding.
Slide: Horizontal and vertical alignment classes with breakpoints Horizontal and vertical alignment classes can also be used with breakpoints as shown here.
  • justify-content-[breakpoint]-[option]
  • align-items-[breakpoint]-[option]
  • align-self-[breakpoint]-[option]
Only narration You can try these classes later for your own understanding
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:
  • Horizontal alignment classes and
  • Vertical alignment classes

for aligning columns in a row

Slide 8: Assignment As an assignment-
  • Open the Mypage.html file
  • In the 3rd row:
    • change the horizontal alignment class with .justify-content-around.
    • add the vertical alignment class .align-items-start
    • remove individual column vertical alignment 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.

Contributors and Content Editors

Nancyvarkey, Nehasolanki

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Bootstrap/C2/Horizontal-and-Vertical-Alignment-Classes-in-Bootstrap/English&oldid=55133"