Difference between revisions of "Bootstrap/C3/Alert-and-Badge-in-Bootstrap/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with " {| border="1" |- || '''VISUAL CUE''' || '''NARRATION''' |-''' |- || Slide: Title || Welcome to the Spoken Tutorial on '''“Alert and Badge in Bootstrap”.''' |- || Slide 2...")
 
 
Line 145: Line 145:
 
|| [Firefox]
 
|| [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'''.
 
|| Notice that the '''Dismiss button''' i.e '''Close sign''' is added to the '''alert'''.
  
Line 152: Line 152:
 
The '''alert''' disappears.
 
The '''alert''' disappears.
  
−
Again refresh the page.
+
|-
 +
||Refresh the page >> Highlight close button >> click on it.
 +
||Again refresh the page.
  
 
Notice that the '''alert''' has appeared again and we can close it by clicking the '''Dismiss button'''.
 
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.
 
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.'''
 
|| '''Badges''' can also be used as part of '''links''' or '''buttons''' to provide a '''counter.'''
  

Latest revision as of 17:51, 15 September 2021


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:

New Products Added! <a href="#" class="alert-link">Check them now</a>
 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:

New Products Added! <a href="#" class="alert-link">Check them now</a> <button type="button" class="close" data-dismiss="alert">×</button>
 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 >> Click on it.

Notice that the Dismiss button i.e Close sign is added to the alert.

Click on it.

The alert disappears.

Refresh the page >> Highlight close button >> click on it. 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 New

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

Highlight the list of stores list item 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:


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

</button>

<button type="button" class="list-group-item list-group-item-action list-group-item-secondary">Delhi 4

</button>

<button type="button" class="list-group-item list-group-item-action list-group-item-secondary">Chennai 2

</button>

<button type="button" class="list-group-item list-group-item-action list-group-item-secondary">Kolkata 2

</button>

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 New

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

Contributors and Content Editors

Nancyvarkey, Nirmala Venkat

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Bootstrap/C3/Alert-and-Badge-in-Bootstrap/English&oldid=55530"