Difference between revisions of "Bootstrap/C3/Navbar-in-Bootstrap/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with " {| border="1" |- || '''VISUAL CUE''' || '''NARRATION''' |- || Slide: Title || Welcome to the Spoken Tutorial on '''“Navbar in Bootstrap”.''' |- || Slide 2: Learning O...")
 
 
Line 38: Line 38:
 
|| In this tutorial, we will create a '''navbar''' as shown here using '''Bootstrap classes'''.
 
|| In this tutorial, we will create a '''navbar''' as shown here using '''Bootstrap classes'''.
  
−
This '''navbar''' has the following components: *'''Brand logo'''
+
This '''navbar''' has the following components:  
 +
*'''Brand logo'''
 
*'''Navigation '''and  
 
*'''Navigation '''and  
 
*'''Search form'''
 
*'''Search form'''
Line 205: Line 206:
 
So for all the screen sizes below '''medium''' i.e '''small''' and '''extra small,''' the '''navbar''' will be expanded.
 
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.
+
For the screen size '''medium''' and above, the '''navbar''' will be in a single row.
  
 
|-
 
|-
Line 223: Line 224:
 
We can see they are all in a single horizontal row.
 
We can see they are all in a single horizontal row.
  
−
Now enable the '''Responsive design mode'''.
+
Now enable the '''responsive design mode'''.
  
 
I will decrease the screen size.
 
I will decrease the screen size.
Line 357: Line 358:
  
 
</button>
 
</button>
−
|| After the '''<anchor> tag''' for brand logo, type the code as shown.
+
|| After the '''<anchor> tag''' for '''brand logo''', type the code as shown.
  
 
We have created a '''toggle button''' by adding the '''class .navbar-toggler.'''
 
We have created a '''toggle button''' by adding the '''class .navbar-toggler.'''

Latest revision as of 15:51, 2 September 2021


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:

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

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

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

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

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

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

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

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