Nehasolanki at 10:01, 21 May 2021

2021-05-21T10:01:17Z

Nancyvarkey at 11:56, 13 May 2021

2021-05-13T11:56:38Z

Nehasolanki: Created page with "'''Title of the script: '''Horizontal and Vertical Alignment Classes in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhi..."

2021-05-11T15:15:36Z

Created page with "'''Title of the script: '''Horizontal and Vertical Alignment Classes in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhi..."

New page

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

{| border="1"
|-
| | '''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:
<pre>
<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>
</pre>
| | 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:
<pre>
<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>
</pre>
| | 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:
<pre>
<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>
</pre>
| | 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:
<pre>
<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>
</pre>
| | 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.
|-
|}

@@ Line 256: / Line 256: @@
 |  | 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-start,''' columns are''' '''aligned to the top of the row
-* In '''.align-items-end, '''columns are''' '''aligned from the bottom of the row
+* In '''.align-items-end, '''columns are''' '''aligned to 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

@@ Line 82: / Line 82: @@
 |  | 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-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-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
+* 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
+* Next '''class''' is '''.justify-content-between class.''' Here the extra space is equally divided in between all the columns of the row
-* And in''' .justify-content-around class, '''every column has equal left and right space around them
+* And in '''.justify-content-around class, '''every column has equal left and right space around them
 |-
@@ Line 96: / Line 96: @@
 |  | 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: Code Files
@@ Line 160: / Line 160: @@
 And the height of the row has increased.
-Now let us see how we can add '''horizontal alignment class''' to the 3rd row'''.'''
+Now let us see how we can add '''horizontal alignment class''' to the 3rd row.
 |-
 |  | Switch to Mypage.html
@@ Line 209: / Line 209: @@
 |  | Observe the 3rd row.
-The extra space is equally divided in between amongst all the columns of this row.
+The extra space is equally divided in between all the columns of this row.
 |-
 |  | Only narration
@@ Line 422: / Line 422: @@
 |  | '''Horizontal''' and '''vertical alignment classes''' can also be used with '''breakpoints''' as shown here.
 |-

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

Nehasolanki at 10:01, 21 May 2021

Nancyvarkey at 11:56, 13 May 2021

Nehasolanki: Created page with "'''Title of the script: '''Horizontal and Vertical Alignment Classes in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhi..."