Nancyvarkey at 12:21, 15 September 2021

2021-09-15T12:21:00Z

Nirmala Venkat: Created page with " {| border="1" |- || '''VISUAL CUE''' || '''NARRATION''' |-''' |- || Slide: Title || Welcome to the Spoken Tutorial on '''“Alert and Badge in Bootstrap”.''' |- || Slide 2..."

2021-09-08T13:18:15Z

Created page with " {| border="1" |- || '''VISUAL CUE''' || '''NARRATION''' |-''' |- || Slide: Title || Welcome to the Spoken Tutorial on '''“Alert and Badge in Bootstrap”.''' |- || Slide 2..."

New page

{| border="1"
|-
|| '''VISUAL CUE'''
|| '''NARRATION'''
|-'''
|-
|| Slide: Title
|| Welcome to the Spoken Tutorial on '''“Alert and Badge in Bootstrap”.'''
|-
|| Slide 2:

Learning Objectives
|| In this tutorial, we will learn about:

* '''Alert''' and its '''classes '''
* '''Badge''' and its '''classes'''
* '''Badge '''as '''label'''
* '''Badge '''as '''counter '''and
* '''Badge pill'''
|-
|| Slide 3:
System Requirements
|| This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''Bootstrap 4.6.0'''
* '''HTML5'''
* '''gedit Text Editor '''and
* '''Firefox web browser'''
|-
|| Slide 4: Prerequisite
https://spoken-tutorial.org
||
* To follow this tutorial, you should be familiar with '''HTML''', '''CSS, JavaScript '''and''' JQuery.'''
* If not, please go through the relevant''' '''tutorials on this '''website'''.
|-
|| [Firefox-Mypage.html]

|| In this tutorial, we will create a '''dismissal alert''' as shown here, using '''Bootstrap.'''

On clicking the '''Close''' button, the '''alert message''' will disappear.

Then we’ll create a '''badge “New”''' for the '''nav item “Offers”. '''

And we’ll also create '''badges''' for the '''list group '''as shown here using '''Bootstrap.'''
|-
|| Slide: Alert
|| Let’s start with the '''alert.'''
* '''Alerts '''are used to display '''messages''' which need immediate attention from the '''user'''.
* For example: '''warning, error''', etc.
|-
|| Slide: Alert Classes

||
* '''.alert class''' is used to create a basic '''alert'''.

|-
|| Slide: Alert Classes
||
* Along with this '''class''', the following '''alert classes''' are used for proper '''styling'''.
|-
|| Slide: Alert Classes
||
* We can also include '''links''' within any '''alert'''.
* '''.alert-link class''' is used to set the matching colored '''links''' within any '''alert.'''

Let’s use these '''classes''' in our '''layout.'''
|-
|| Point to Mypage.html in My-bootstrap folder
|| Locate the file '''Mypage.html '''in the '''My-bootstrap''' folder.

We will use the '''Mypage.html '''file''' '''which we had created earlier''' '''for this demonstration.
|-
|| Slide: Code Files
||
* The file used in this tutorial is available in the '''Code Files''' link on this tutorial page.
* Please download and extract it.
* Make a copy and then use it 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]

Type:

<div class="alert alert-danger" role="alert">New Products Added! <a href="#" class="alert-link">Check them now</a></div>
|| Type the code before the contents such as '''heading, paragraph''' as shown here.

We have created an '''alert''' using '''.alert class''' and '''styled''' it with '''.alert-danger'''.

We have added an '''alert link''' also, using the '''.alert-link class'''.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Open Mypage.html in Firefox
|| Open the file '''Mypage.html''' in a '''web browser'''.
|-
|| [Firefox]
|| Notice that an '''alert''' is added before the '''heading'''.

Notice that the color of the '''link''' within this '''alert''' is set according to the colour of the '''alert'''.
|-
||
|| What if a '''user''' wants to close this '''alert''', after reading the message?

Let's see how to do this.
|-
|| Switch to Mypage.html
|| Switch to the''' Mypage.html''' file in the '''editor'''.
|-
|| [gedit - Mypage.html]

Type:
<div class="alert alert-danger alert-dismissible fade show">New Products Added! <a href="#" class="alert-link">Check them now</a>

<button type="button" class="close" data-dismiss="alert">×</button></div>
|| Update the '''alert''' as shown here.

Here, we have added a '''dismiss button'''.

Here, '''&''' '''times;''' will display a '''close sign'''.

'''Alert JavaScript plugin '''is used to dismiss any '''alert inline'''.

So, we’ve added '''data-dismiss="alert" attribute,''' which '''triggers''' the '''JavaScript functionality'''.

In the '''div ''' '''tag''', we have added the '''.alert-dismissible class.'''

This '''class''' adds an extra '''padding''' to the right of the '''alert''' and positions the '''Close button.'''

We have also added''' .fade '''and''' .show class '''to animate '''alerts''' while dismissing them.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox]

Highlight close button</div>
|| Notice that the '''Dismiss button''' i.e '''Close sign''' is added to the '''alert'''.

Click on it.

The '''alert''' disappears.

Again refresh the page.

Notice that the '''alert''' has appeared again and we can close it by clicking the '''Dismiss button'''.
|-
|| Slide: Badge
|| Next is '''badge'''.

* '''Badge '''is used as a labelling component as well as to provide counters.
|-
|| Slide: Badge

|
* These are some examples of '''badges'''.
* Size of the '''badge''' is set according to the immediate parent element.
|-
|| Slide: Badge Classes

||
* '''.badge class''' is used to create a basic '''badge'''.
* Along with this '''class''', following '''badge classes''' are used for proper '''styling'''.
|-
||
|| Let’s use these '''classes''' in our '''layout'''.
|-
|| Switch to Mypage.html
|| Switch to the''' Mypage.html''' file in the '''editor'''.
|-
|| [gedit - Mypage.html]

Update:
<a href="#" class="nav-item nav-link">Offers <span class="badge badge-primary">New</span>

</a>
|| For the '''nav item “Offers”''', we will create a '''badge.'''

Type the code as shown here.

We have added '''.badge class''' for creating a basic '''badge''' and '''.badge-primary class''' for '''styling''' it.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox]

Highlight Offer New
|| Notice that a '''badge''' in blue color is added to the '''nav item “Offers”.'''

Size of the '''badge''' is set according to the immediate parent element.

Here the immediate parent element is this''' nav item'''.

So in this way, a '''badge''' is used as a labelling component.
|-
||
|| '''Badges''' can also be used as part of '''links''' or '''buttons''' to provide a '''counter.'''

We want '''counters''' for the number of stores in these locations.

Let’s see how to do this.
|-
|| Switch to Mypage.html
|| Switch to the''' Mypage.html''' file in the '''editor'''.
|-
|| [gedit - Mypage.html]

Update:

<div class="list-group my-2">

<button type="button" class="list-group-item list-group-item-action list-group-item-secondary active">Stores</button>

<button type="button" class="list-group-item list-group-item-action list-group-item-secondary">Mumbai <span class="badge badge-light">5</span>

</button>

<button type="button" class="list-group-item list-group-item-action list-group-item-secondary">Delhi <span class="badge badge-light">4</span>

</button>

<button type="button" class="list-group-item list-group-item-action list-group-item-secondary">Chennai <span class="badge badge-light">2</span>

</button>

<button type="button" class="list-group-item list-group-item-action list-group-item-secondary">Kolkata <span class="badge badge-light">2</span>

</button>

</div>
| style="background-color:#ffffff;border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Update the '''list group''' as shown here.

For some '''list items - Mumbai, Delhi, Chennai '''and''' Kolkata''', we have set '''badge''' as '''counters'''.

|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| And switch to the '''browser''' and refresh the page.
|-
|| [Firefox]
|| Notice the '''list items.'''

'''Badges''' are added to them.

It shows that Mumbai has 5 stores, Delhi has 4 stores and so on.

In this way, a '''badge''' is used to provide '''counters.'''
|-
||
|| Now let's see how to make the corner of the '''badge''' more rounded.
|-
|| Slide: Badge Pill
|| '''.badge-pill class''' is used to make the corner of the '''badge''' more rounded.

Let's use this '''class'''.
|-
|| Switch to Mypage.html
|| Switch to the '''editor'''.
|-
|| [gedit - Mypage.html]

Update:

<a href="#" class="nav-item nav-link">Offers <span class="badge badge-primary badge-pill">New

</span>

</a>
|| I have added the '''.badge-pill class '''with the''' badge '''of''' nav item '''as shown here.

This will show “'''New'''” with more rounded corners.

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

|| Observe that the corners of the '''badge''' are now more rounded, like a pill.

So in this way we can create '''alerts''' and '''badges''' using '''Bootstrap classes.'''
|-
|| Only narration
|| With this we have come to the end of this tutorial.

Let us summarize.
|-
|| Slide: Summary
|| In this tutorial, we have learnt about:

* '''Alert '''and''' '''its''' classes '''
* '''Badge '''and its''' classes'''
* '''Badge '''as''' label'''
* '''Badge '''as''' counter '''and
* '''Badge pill'''
|-
|| Slide: Assignment
|| As an assignment-

* Open the '''Mypage.html''' file.
* Replace the '''class''' '''.badge-light''' with '''.badge-dark '''for all the''' badges '''of the''' list group.'''
* 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 in this forum.
|-
|| Slide: Acknowledgement
|| Spoken Tutorial project is funded by the Ministry of Education (MoE), Govt. of India.
|-
|| Slide: Thanks
|| The script and video for this tutorial was contributed by Neha Solanki.

This is Nancy Varkey from the Spoken Tutorial project team, IIT Bombay signing off.

Thanks for watching.
|-
|}

@@ Line 145: / Line 145: @@
 || [Firefox]
-Highlight close button</div>
+Highlight close button >> Click on it.
 || Notice that the '''Dismiss button''' i.e '''Close sign''' is added to the '''alert'''.
@@ Line 152: / Line 152: @@
 The '''alert''' disappears.
-Again refresh the page.
+|-
 Notice that the '''alert''' has appeared again and we can close it by clicking the '''Dismiss button'''.
@@ Line 208: / Line 210: @@
 So in this way, a '''badge''' is used as a labelling component.
 |-
-||
+||Highlight the list of stores list item
 || '''Badges''' can also be used as part of '''links''' or '''buttons''' to provide a '''counter.'''

Bootstrap/C3/Alert-and-Badge-in-Bootstrap/English - Revision history

Nancyvarkey at 12:21, 15 September 2021

Nirmala Venkat: Created page with " {| border="1" |- || '''VISUAL CUE''' || '''NARRATION''' |-''' |- || Slide: Title || Welcome to the Spoken Tutorial on '''“Alert and Badge in Bootstrap”.''' |- || Slide 2..."