Bootstrap/C2/Typography-in-Bootstrap/English

From Script | Spoken-Tutorial
Jump to: navigation, search

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


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: 

<div class="row">

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

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

</div>

</div>
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: 

<div class="row">

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

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

</div>

</div>
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: 

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

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

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

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

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: 

<div class="row">

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

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

</div> </div>

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.

Contributors and Content Editors

Nehasolanki

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Bootstrap/C2/Typography-in-Bootstrap/English&oldid=55197"