Bootstrap/C3/Jumbotron-and-Breadcrumb-in-Bootstrap/English

VISUAL CUE	NARRATION
Slide: Title	Welcome to the Spoken Tutorial on “Jumbotron and Breadcrumb in Bootstrap”.
Slide 2: Learning Objectives	In this tutorial, we will learn about: Jumbotron and Breadcrumb
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 and CSS. If not, please go through the HTML and CSS tutorials on this website.
[Firefox- Mypage.html]	In this tutorial, we will create Jumbotron and Breadcrumb using Bootstrap classes. Here, we will display the contents such as heading, paragraph, etc. using Jumbotron. In the Login page, we will add breadcrumb such as Home/Login. Let’s start with Jumbotron.
Slide: Jumbotron	Jumbotron is a lightweight and flexible component. It is used to showcase key content or information. For example: Marketing messages on a webpage. Let’s see how to create them.
Point to Mypage.html in My-bootstrap folder	Locate the files Mypage.html and Login.html in the My-bootstrap folder. We will use the Mypage.html and Login.html files which we had saved earlier for 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]	The part consisting of heading and paragraph shows key information about this website. We will create this part with a Jumbotron for extra attention. So, let’s start.
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: Welcome to Online Grocery Shopping!! 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. Hand-picked fresh fruits and vegetables are also available. <a class="btn btn-info btn-lg" href="#" role="button">Know More</a>	Replace the heading and paragraph with the code shown below. Here we have added .display-4 class to the heading and .lead class to the paragraph. Then, we have added some additional elements like horizontal ruler, paragraph and a button.
Press Ctrl + S	Save the file.
Switch to Firefox	Switch to the browser and refresh the page.
[Firefox]	The elements are added to the page accordingly. Notice a horizontal ruler is added. Then a new line content has been added here using the paragraph tag. And also a “Know More” button is added.
	But notice that the spacing and styling is not proper. So let’s add a .jumbotron class for proper spacing and styling.
Switch to Mypage.html	Switch to the Mypage.html file.
[gedit - Mypage.html] Update: Welcome to Online Grocery Shopping!! 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. Hand-picked fresh fruits and vegetables are also available. <a class="btn btn-info btn-lg" href="#" role="button">Know More </a>	Wrap all these elements with the .jumbotron class as shown here.
Press Ctrl + S	Save the file.
Switch to firefox	Switch to the browser and refresh the page.
[Firefox]	Notice that now the spacing and styling of all these elements are proper. They have proper margin and background color. In this way, using Jumbotron we can showcase key information of the website. Next let’s learn about breadcrumbs.
Slide: Breadcrumb	Breadcrumb is a navigation that indicates the current page location within a website. Let’s try this.
Switch to firefox	Switch to the browser.
[Firefox]	Click on the “Login” button. The Login page opens. For this page, to indicate the current page’s location we will use breadcrumbs.
Open Login.html in gedit	Open the file Login.html in any text editor. I have opened it in the gedit Text Editor.
[gedit - Login.html] Type: <nav class="mt-2"> <a href="Mypage.html">Home</a> Login </nav>	Before the heading, type the code as shown. Here, we have created a breadcrumb by using the .breadcrumb class on the ordered list. The first item is “Home” and the second is “Login”. We have used .breadcrumb-item class in both the items to properly style them. Using <anchor> tag, we have linked Mypage.html with “Home”. And added .active class to “Login”
Press Ctrl + S	Save the file.
Switch to firefox	Switch to the browser and refresh the page.
[Firefox]	At the top,breadcrumbs have been added to the page. It shows that currently we are on the “Login” page and its parent page is “Home”.
Click on Home	Click on “Home”. On clicking, we have navigated to the Home page i.e Mypage.html. In this way, we can create breadcrumbs using Bootstrap classes.
[Firefox]	Now let’s see how these pages look in different screen sizes. The current screen size is suitable for Laptops and Desktops. And this is the layout for them.
Right click >> Inspect Element Click on Responsive Design Mode	Enable the Responsive design mode.
Decrease the screen size	I will decrease the screen size now.
[Firefox]	Observe the page. The Jumbotron is adjusted according to the screen size. This screen size is suitable for Tablets and Mobile devices.
Click on Login	Click on “Login”. Observe that the size of breadcrumb is also adjusted according to the screen size.
	In this way we can create responsive layouts using Bootstrap.
Only narration	With this we have come to the end of this tutorial. Let us summarize.
Slide 6: Summary	In this tutorial, we have learnt to use Jumbotron and Breadcrumb
Slide 8: Assignment	As an assignment- Open the Form.html file. Create a breadcrumb as “Home/SignUp” for this page. 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

Nirmala Venkat