Nancyvarkey at 09:28, 1 July 2021

2021-07-01T09:28:52Z

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

2021-06-29T07:54:02Z

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

New page

'''Title of the script: '''Color 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, Border color classes, Text color classes, Links color classes, Background color classes

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

Learning Objectives
| | In this tutorial, we will learn about '''color''' '''classes''' for:

* '''Borders'''
* '''Text'''
* '''Links '''and
* '''Background'''

|-
| | 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 using '''color classes''' in '''Bootstrap'''.
|-
| | Slide: Border Color Classes

border.png
| | Let’s start with the '''Border color classes.'''

'''Border color classes '''are used to color the borders.

Following are the '''border color classes '''shown''' '''in their respective color.

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 any '''text editor.'''

I have opened it in the '''gedit Text Editor.'''
|-
| | [gedit - Mypage.html]

Delete:

<link rel="stylesheet" href="Mystyle.css">
| | First of all, we will remove linking '''Mystyle.css file '''with this''' HTML '''file.

|-
| | [gedit - Mypage.html]

Delete:

border: 2px solid green;
| | And in the '''4th row''', delete the '''border property''' which was '''set''' using the '''style attribute'''.

We will design this layout using '''bootstrap''' '''color classes '''later'''.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Open Mypage.html in Firefox
| | Open the file '''Mypage.html''' in a '''web browser'''.

I have opened it in the '''Firefox web browser.'''
|-
| | [Firefox]
| | Observe that all the borders set by using '''Mystyle.css''' '''file''' and '''style attribute''' are now removed.

Now let's use the '''border color class'''.
|-
| | Switch to Mypage.html in gedit
| | Switch back to '''Mypage.html '''in the '''text editor'''.
|-
| | [gedit - Mypage.html]

Type:

<pre>
<div class="container-lg border border-primary">
</pre>

| | We’ll add a border with its color to the '''container''' as shown here.

Here the '''.border class''' is used to set a basic border.

And '''.border-primary''' '''class''' is used to color the border as blue.
|-
| | [gedit - Mypage.html]

Type:

<pre>
<div class="row">
<div class="col-sm-3 order-sm-last pt-sm-5
border border-primary">
<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></div>

<div class="col-sm-9 pt-sm-5 border border-primary">

<h3> Welcome to Online Grocery Shopping!! </h3>

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

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

| | We’ll also add borders to the columns of the '''2nd row''' as shown here.

|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]
| | Observe that the blue color border is added around the '''container'''.

And it is also added to both the columns of the 2nd''' row.'''
|-
| | Slide: Text Color Classes

text.png
| | Next is '''text color classes'''.

* '''Text color classes '''are used to color the '''text''' and '''links'''
* Following are the '''text color classes''' shown in their respective color.

Let’s use some of these '''classes''' in our '''layout'''.
|-
| | Switch to Mypage.html
| | Switch to the''' Mypage.html''' file in the '''editor'''.
|-
| | [gedit - Mypage.html]

Highlight:

<pre>
<div class="row">

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

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

</div>

</div>
</pre>
| | Notice the '''1st row'''.

Recall that we had already '''set .text-danger class''' to the heading in one of the earlier tutorials.

|-
| | Switch to firefox
| | Switch to the '''browser'''.
|-
| | [Firefox]
| | Notice that the color of the heading is red.
|-
| |
| | Now let us see what happens if we add these color '''classes''' to '''links'''.
|-
| | Switch to Mypage.html
| | Switch to the''' Mypage.html''' file in the '''editor'''.
|-
| | [gedit - Mypage.html]

Update:

<pre>
<ul>

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

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

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

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

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

</ul>
</pre>
| | In the '''2nd row''', we’ll set the red color to all the '''links.'''

Now we will replace the '''.text-reset''' '''class''' with '''.text-danger class'''.

|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]
| | Observe that the color of the '''links''' is now '''set''' to red.

Notice that the color of the '''links''' darkens when you move the cursor on them.

The color of '''links''' darkens only if we apply '''text color classes''' to '''links, '''not to''' text.'''
|-
| | Only narration
| | Next let’s learn about '''background color classes.'''
|-
| | Slide: Background Color Classes

background.png
| |
* '''Background color classes '''are used to color the background of an element.

Following are the '''background color classes''':

Now let’s understand them with examples.
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:

<pre>

<div class="row bg-info">

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

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

</div></div>
</pre>
| | In the '''1st row''', add .'''bg-info class'''.

And in its column, add '''.bg-light class''' as shown here.

|-
| | [gedit - Mypage.html]

Update:

<pre>
<div class="row">

<div class="col-sm-3 order-sm-last pt-sm-5
border border-primary bg-light">

<ul>

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

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

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

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

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

</ul></div>

<div class="col-sm-9 pt-sm-5 border border-primary bg-light">

<h3> Welcome to Online Grocery Shopping!! </h3>

<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>
</div></div>
</pre>
| | In the '''2nd row''', add .'''bg-light class''' to both the columns as shown here.

|-
| | [gedit - Mypage.html]

Update:

<pre>
<div class="row justify-content-around align-items-start
bg-info" style="height: 160px;">

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

<h5> ABOUT BHARAT </h5>

<p class="font-italic"> About us <br> FAQ </p>

</div>

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

<h5> PAYMENT AND SHIPPING </h5>

<p class="font-italic"> Payment Methods <br> Shipping Policy </p>

</div>

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

<h5> CONTACT US </h5>

<p class="font-italic"> contact@bharat-online.com <br>
9000000001 </p>

</div></div>
</pre>
| | In the '''3rd row''', add '''.bg-info class''' as shown here.

|-
| | [gedit - Mypage.html]

Update:

<pre>
<div class="row bg-secondary">

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

<div class="mx-auto" style="width: 140px;"> Copyright- 2021
</div></div></div>
</pre>
| | In the '''4th row''', add '''.bg-secondary class''' as shown here.

|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]
| | Observe that we have successfully set the background colors to this '''HTML''' file.

In this manner, you can set different colors using '''Bootstrap color classes'''.
|-
| | Only narration
| | With this we have come to the end of this tutorial.

Let us now summarize.
|-
| | Slide: Summary

| | In this tutorial, we have learnt about '''classes''' which are used to '''color''':

* '''Borders'''
* '''Text'''
* '''Links '''and
* '''Background'''

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

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

* In the '''4th''' '''row''', add a border and set its color using the '''.border-dark class.'''
* 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 Ministry of Education (MoE), Govt. of India.
|-
| | Slide: Thanks
| | This is Neha Solanki from Spoken Tutorial, IIT Bombay signing off.

Thanks for watching.
|-
|}

@@ Line 226: / Line 226: @@
 |-
 |  |
-|  | Now let us see what happens if we add these color '''classes''' to '''links'''.
+|  | Now let us see what happens if we add these '''color classes''' to '''links'''.
 |-
 |  | Switch to Mypage.html

Bootstrap/C2/Color-Classes-in-Bootstrap/English - Revision history

Nancyvarkey at 09:28, 1 July 2021

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