Nehasolanki: Created page with "'''Title of the script: '''Typography in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Keywords: '''Boot..."

2021-06-07T09:35:32Z

Created page with "'''Title of the script: '''Typography in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Keywords: '''Boot..."

New page

'''Title of the script: '''Typography 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, Typography in Bootstrap, Text Alignment, Text Transform, Font Weight and Italic, Text Decoration, Reset Color, Display headings

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Welcome to the Spoken Tutorial on '''“Typography in Bootstrap”.'''
|-
| | Slide 2:

Learning Objectives
| | In this tutorial, we will learn how to use:

* '''Text Alignment'''
* '''Text Transform'''
* '''Font Weight and Italic'''
* '''Text Decoration'''
* '''Reset Color '''and

* '''Display headings'''

for styling and formatting text in '''Bootstrap'''.
|-
| | 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 in '''Bootstrap'''.
|-
| | Slide: Text Alignment

[Image = left.png]

[Image = right.png]

[Image = center.png]

[Image = justify.png]
| | Let’s start with the '''text alignment'''.

Text can be aligned either to the:

* '''Left'''
* '''Right'''
* '''Center '''or
* '''Justify'''

|-
| | Slide: Text Alignment Classes
| | These are the available '''classes''' for them:

* '''.text-left'''
* '''.text-right'''
* '''.text-center'''
* '''.text-justify'''

|-
| |
| | 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 Firefox
| | Open the file '''Mypage.html''' in a '''web browser'''.
|-
| | [Firefox]

| | Notice that by default, the text is aligned to the left.

Let us change the '''text alignment''' of the first row to the center.
|-
| | 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">

<div class="col m-sm-4 text-center">

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

</div>

</div>
</pre>
| | Add the '''.text-center class''' to the column of the first row 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 that the text of the first row is aligned to the center now.

Try the other '''text alignment classes''' on your own later, for your understanding.
|-
| | Slide: Text Alignment Classes with Breakpoints
| | Also try '''text-left, .text-right '''and''' .text-center classes''' with '''breakpoints''' as shown below.
|-
| | Slide: Text Transform
| | Next we will explore '''text transform'''.

Basically, it manages the capitalization of text.
|-
| | Slide: Text Transform Classes

Example:

uppercase.png

lowercase.png

capitalize.png

| | These are the '''classes''' for it:

* '''.text-uppercase''': It converts all the letters to uppercase
* '''.text-lowercase''': It converts all the letters to lowercase
* '''.text-capitalize''': It converts the first letter of each word to uppercase

Let us try one of these.
|-
| | Switch to Mypage.html
| | Switch to the''' Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:
<pre>
<div class="row">

<div class="col m-sm-4 text-center text-uppercase">

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

</div>

</div>
</pre>
| | Add the '''.text-uppercase class''' to the column of the first row as shown here.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

| | Observe the first row. We can see all the letters are converted to uppercase.

Try the other''' text transformation classes''' on your own later for your understanding.
|-
| | Slide: Font Weight
| | Next, let’s understand about '''Font Weight'''.

'''Font weight''' specifies how thick the font of the text should be.
|-
| | Slide: Font Weight Classes
| | Following are the '''classes''' for it:

* '''.font-weight-bold'''
* '''.font-weight-bolder'''
* '''.font-weight-normal'''
* '''.font-weight-light'''
* '''.font-weight-lighter'''

Let us try this.
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:
<pre>
<div class="row">

<div class="col font-weight-bold">

<div class="mx-auto" style="width: 140px;
border: 2px solid green;">
Copyright- 2021</div>

</div>

</div>
</pre>
| | Add the '''.font-weight-bold class''' to the column of the last row as shown here.

In our code, we will increase the width of the '''block-level element '''to '''140px'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

| | Observe the output.

The text is set to '''bold''' now.

Try the other '''font weight classes''' on your own later, for your understanding.
|-
| |
| | Let’s understand how to set the text to '''italic'''.
|-
| | Slide: Italic
| | '''.font-italic class''' is used to set the text to '''italic'''.

Let us try this.
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:
<pre>
<p class="font-italic"> 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>
</pre>
| | Add '''.font-italic class''' to the paragraph in the second row as shown here.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]
| | Now we can see that the text in the paragraph is set to '''italic'''.
|-
| | Slide: Text Decoration
| | Next we will learn about '''text decoration'''.
* '''.text-decoration-none class''' is used to remove decoration of the text.
* It is mostly used to remove the '''underline''' of a '''link'''.

|-
| | Switch to firefox
| | Switch to the '''browser'''.
|-
| | [Firefox]

| | Observe the '''links''' in the second row.

They are '''underlined''' when we hover the cursor over the words.

We can use '''.text-decoration-none''' to remove this '''underline, '''if we wish to.
|-
| | Switch to Mypage.html
| | Switch to the''' Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:
<pre>
<ul>

<a href="#" class="text-decoration-none"><li>
Fruits & Vegetables </li></a>

<a href="#" class="text-decoration-none"><li>
Foodgrain </li></a>

<a href="#" class="text-decoration-none"><li>
Beverages </li></a>

<a href="#" class="text-decoration-none" ><li>
Personal care </li></a>

<a href="#" class="text-decoration-none"><li>
Snacks & Branded Foods </li></a>

</ul>
</pre>
| | Add '''.text-decoration-none class''' to all the '''links''' in the second row as shown here.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

| | Observe the second row.

The '''underline''' of the '''links''' are now no longer visible.
|-
| |
| | By default the color of the '''link''' is always set to blue.

But this can be changed to any other colour we like.
|-
| | Slide: Reset Color
| | '''.text-reset class''' is used to change or reset the colour of a text or '''link'''.
|-
| | Switch to Mypage.html
| | Switch to the''' Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:
<pre>
<ul>

<a href="#" class="text-decoration-none text-reset"><li>
Fruits & Vegetables </li></a>
<a href="#" class="text-decoration-none text-reset"><li>
Foodgrain </li></a>
<a href="#" class="text-decoration-none text-reset"><li>
Beverages </li></a>
<a href="#" class="text-decoration-none text-reset"><li>
Personal care </li></a>
<a href="#" class="text-decoration-none text-reset"><li>
Snacks & Branded Foods </li></a>

</ul>
</pre>
| |

Add the '''.text-reset class''' to the '''links''' as shown here.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

| | In the output, the color of the '''links''' are set to the default black colour.

It has inherited the color from its parent.
|-
| | Slide: Display Headings
| | Next, let’s understand '''display headings.'''

* They are used to make headings more prominent than normal headings.
* For example, they are slightly larger than normal headings'''.'''

|-
| | Slide: Display Headings Classes
* '''.display-1'''
* '''.display-2'''
* '''.display-3'''
* '''.display-4'''

| | Following are''' display heading classes:'''

|-
| | Slide: Display Headings - Example

[display.png]

Highlight h1 heading
| | Note the difference between '''h1''' '''heading''' and various other '''display heading classes.'''
|-
| | Only narration
| | Now let’s understand '''display heading classes''' with an example.
|-
| | Switch to Mypage.html
| | Switch to the''' Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:
<pre>
<div class="row">

<div class="col m-sm-4 text-center text-uppercase">

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

</div> </div>
</pre>
| |

Add the '''.display-4 class''' to the column of the first row as shown here.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

| | Observe that now the '''heading''' is slightly larger than normal heading.

Try out the other '''heading classes''' and observe the differences.
|-
| | 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 how to use:

* '''Text Alignment'''
* '''Text Transform'''
* '''Font Weight and Italic'''
* '''Text Decoration'''
* '''Reset Color '''and
* '''Display headings'''

|-
| | Slide 8: Assignment
| | As an assignment-

* Open the '''Mypage.html''' file

* In the '''3rd''' '''row''', set the text font of all the paragraphs to '''italic'''

* Save the file

* 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 the Ministry of Education (MoE), Govt. of India.
|-
| | Slide: Thanks
| | This is Neha Solanki from Spoken Tutorial, IIT Bombay signing off.

Thanks for watching.
|-
|}

Bootstrap/C2/Typography-in-Bootstrap/English - Revision history

Nehasolanki: Created page with "'''Title of the script: '''Typography in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Keywords: '''Boot..."