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:
|
| Slide 3:
System Requirements |
This tutorial is recorded using,
|
| Slide 4: Prerequisite |
|
| [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 |
|
| 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"> </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.
|
| 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
|
| Slide 8: Assignment | As an assignment-
|
| 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. |
