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

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