View source for Bootstrap/C3/Navbar-in-Bootstrap/English




{| border="1"
|-
|| '''VISUAL CUE'''
|| '''NARRATION'''
|-
|| Slide: Title
|| Welcome to the Spoken Tutorial on '''“Navbar in Bootstrap”.'''
|-
|| Slide 2: 

Learning Objectives
|| In this tutorial, we will learn about
*'''collapsible navbar '''and its components.
|-
|| 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 '''navbar''' as shown here using '''Bootstrap classes'''.

This '''navbar''' has the following components: 
*'''Brand logo'''
*'''Navigation '''and 
*'''Search form'''

This '''navbar''' is horizontal for devices like '''Laptop''' or '''Desktop'''.

But on small screen devices like '''mobile phones,''' it collapses.

Then on clicking the '''toggle button,''' it expands.

Let’s see how to create this.
|-
|| Slide: Navbar Components
|| Following are the '''navbar''' components which can be used as needed.

*'''.navbar-brand''' is used for company, product, project name or logo.
*'''.navbar-nav''' is used for a full-height and lightweight '''navigation'''.
*'''.navbar-toggler''' is used with '''collapse plugin'''
*'''.form-inline''' is used for any '''form''' controls and actions.
*'''.navbar-text''' is used for adding vertically centered strings of text.
*'''.collapse.navbar-collapse '''is used for grouping & hiding '''navbar''' contents by '''breakpoint'''.

Let’s use some of these '''navbar''' components.
|-
|| 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 saved earlier''' '''for this demonstration.

We will also use an image '''Logo.png'''.
|-
|| 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 gedit
|| Open the file '''Mypage.html''' in the '''text editor.'''

I have opened it in the '''gedit Text Editor.'''
|-
|| [gedit - Mypage.html]

delete:
<nav class="nav justify-content-center nav-pills nav-justified">

<a class="nav-link active" href="Mypage.html">Home</a>

<a class="nav-link" href="#">Products</a>

<a class="nav-link" href="#">Offers</a>

<a class="nav-link disabled">Feedback</a>

</nav>
|| In the '''2nd''' row, remove this '''navigation '''because we will create a '''navigation''' in the '''navbar'''.

|-
|| [gedit - Mypage.html]

Update:

<div class="row bg-info">

<div class="col">

<nav class="navbar navbar-light bg-light">

<a class="navbar-brand" href="#"><img src="Logo.png" width="30" height="30"></a>

<div class="navbar-nav">

<a href="#" class="nav-item nav-link active">Home</a>

<a href="#" class="nav-item nav-link">Products</a>

<a href="#" class="nav-item nav-link">Offers</a>

<a href="#" class="nav-item nav-link">Feedback</a>

</nav>

|| Type the code as shown here.

First, using '''<nav> tag''', we have added three '''classes'''.

'''.navbar''' is used for creating a basic '''navbar''' with proper '''style'''.

'''.navbar-light''' is used for setting the light background color of the '''navbar'''. 

This '''class''' will automatically set text color to dark.

Instead of this, if we add '''.navbar-dark class, '''then the background color of the '''navbar''' will be dark.

And text will automatically set to some lighter color.

Among the light color background '''classes''', I have used the '''.bg-light class'''.
|-
|| 
|| Next, using the '''<anchor> tag''', we have added the '''.navbar-brand class'''.

This '''class''' is used to display a brand logo and name.

For this, we have set an image '''Logo.png''' with '''width''' and '''height'''.
|-
|| 
|| Then, we are creating a '''navigation'''.

For this we have added '''.navbar-nav class '''and created four items.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Open Mypage.html in Firefox
|| Open the file '''Mypage.html''' in a '''web browser'''.
|-
|| [Firefox]


Highlight Navbar
|| We have successfully created a '''navbar.'''

Notice the background color is light and the text color is dark.

Brand logo is displayed on the left side.

And the '''navigation''' is displayed on the right side with''' '''four items.

Notice that the brand logo and all the four items are expanded, by default.

That is, they are not horizontally aligned in a single row.

For this, we have to add one more '''class'''.
|-
|| Switch to Mypage.html
|| Switch to the''' editor.'''
|-
|| [gedit - Mypage.html]

Update:

<div class="row">
<div class="col">
<nav class="navbar navbar-expand-md navbar-light bg-light">

<a class="navbar-brand" href="#"><img src="Logo.png" width="30" height="30" alt=""></a>

<div class="navbar-nav">

<a href="#" class="nav-item nav-link active">Home</a>

<a href="#" class="nav-item nav-link">Products</a>

<a href="#" class="nav-item nav-link">Offers</a>

<a href="#" class="nav-item nav-link">Feedback</a>

</nav>

|| To the '''<nav> tag''', add '''.navbar-expand-md '''as shown here.

We have added a '''.navbar-expand class''' with the '''medium''' screen size '''breakpoint'''.

So for all the screen sizes below '''medium''' i.e '''small''' and '''extra small,''' the '''navbar''' will be expanded.

For the screen size '''medium''' and above, the '''navbar''' will be in a single row.

|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox]

Right click >> Inspect Element

Click on Responsive Design Mode
|| Notice all the '''navbar''' components.

We can see they are all in a single horizontal row.

Now enable the '''responsive design mode'''.

I will decrease the screen size.

Notice that the '''navbar''' components are expanded now.

I will increase the screen size.

Now notice that all the '''navbar''' components are in a single horizontal row.
|-
|| 
|| Next, let’s see how to add a '''form''' in this '''navbar'''.
|-
|| Switch to Mypage.html
|| Switch to the''' Mypage.html''' file.
|-
|| [gedit - Mypage.html]

Type:

<form class="form-inline">

<input class="form-control mr-sm-2" type="search" placeholder="Search">

<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

</form>
|| After the '''navigation''', type the code as shown here.

We have created an''' inline form '''for '''search'''.
|-
|| [gedit - Mypage.html]

Type:

<div class="navbar-nav mr-auto">

<a href="#" class="nav-item nav-link active">Home</a>

<a href="#" class="nav-item nav-link">Products</a>

<a href="#" class="nav-item nav-link">Offers</a>

<a href="#" class="nav-item nav-link">Feedback</a>

|| Add '''.mr-auto''' to the '''navigation '''for better '''alignment'''.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox]


Highlight search form
|| We have successfully added a '''search form''' in the '''navbar'''.

I will decrease the screen size.

For the screen size suitable for '''mobile devices''', this '''navbar''' is not displaying properly.

So we’ll add a '''toggle button'''.

On clicking that '''button''', the '''navigation '''and '''search form''' will display.
|-
|| Switch to Mypage.html
|| Switch to the''' Mypage.html''' file in the '''editor'''.
|-
|| [gedit - Mypage.html]

Type:

<div class="collapse navbar-collapse" id="navbar1">

<div class="navbar-nav mr-auto">

<a href="#" class="nav-item nav-link active">Home</a>

<a href="#" class="nav-item nav-link">Products</a>

<a href="#" class="nav-item nav-link">Offers</a>

<a href="#" class="nav-item nav-link">Feedback</a>

<form class="form-inline">

<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

</form>

|| Add '''.collapse.navbar-collapse class''' to '''navigation''' and '''search form''' as shown here.

This '''inbuilt JavaScript plugin''' for '''collapse,''' is used to show and hide content.
|-
|| [gedit - Mypage.html]

Update:

<head>

<title> Mart </title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="bootstrap-4.6.0-dist/css/bootstrap.css"> 

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

</head>
|| In the '''head''' section, type the code as shown here.

To work''' JavaScript plugin''' for '''collapse''', we have to include '''jQuery '''first.

Then a '''Bootstrap JavaScript bundle '''as shown here.
|-
|| [gedit - Mypage.html]

Type:

<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar1">

<span class="navbar-toggler-icon">

</span>

</button>
|| After the '''<anchor> tag''' for '''brand logo''', type the code as shown.

We have created a '''toggle button''' by adding the '''class .navbar-toggler.'''

Now what we want is, on clicking the '''button''', the '''navigation''' and '''search form''' should get displayed.

So, we have added these '''JavaScript attributes''' '''data-toggle="collapse"''' and a '''data-target''' to the '''button'''.

This will automatically assign the control of collapsible elements.

'''.navbar-toggler-icon class '''is used to show a three lined icon.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox]

Highlight the toggle button with 3 lines
|| Now we can see the brand logo and a '''button''' with 3 lines i.e '''toggle icon'''.
|-
|| Click on the toggle button
|| Click on this '''toggle button'''.

'''Navbar''' is expanded now.

'''Navigation '''and '''search form''' are visible.
|-
|| Click on the toggle button
|| Again, click on the '''toggle button'''.

'''Navigation''' and '''search form''' are now collapsed.

This '''layout''' is used for '''tablets '''and''' mobile devices.'''
|-
|| Increase the screen size.
|| I will increase the screen size.

Now the '''toggle button''' is removed.

And all the components of '''navbar''' are displayed in a single horizontal row.

This '''layout''' is used for '''Laptop and Desktop devices.'''
|-
|| 
|| So, in this way we can create '''responsive navbar '''using '''Bootstrap classes.'''
|-
|| 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 about:

*'''collapsible navbar''' and its components.

|-
|| Slide 8: Assignment
|| As an assignment-

*Open the '''Mypage.html''' file.

*Change the '''classes''' '''.navbar-light '''and '''.bg-light''' with''' .navbar-dark '''and''' .bg-dark'''

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