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

2021-09-09T10:52:41Z

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

New page

{| border="1"
|-
|| '''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:
<h3 class="display-4">Welcome to Online Grocery Shopping!!</h3>

<p class="lead">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.</p>

<hr style="height:2px;background-color:gray" class="my-4">

<p> Hand-picked fresh fruits and vegetables are also available.</p>

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

<div class="jumbotron">

<h3 class="display-4">Welcome to Online Grocery Shopping!!</h3>

<p class="lead">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.</p>

<hr class="my-4">

<p> Hand-picked fresh fruits and vegetables are also available.</p>

<a class="btn btn-info btn-lg" href="#" role="button">Know More

</a>

</div>
|| 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">

<ol class="breadcrumb">

<li class="breadcrumb-item"><a href="Mypage.html">Home</a></li>

<li class="breadcrumb-item active">Login</li>

</ol>

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

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

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