Bootstrap/C3/Navbar-in-Bootstrap/English
| 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
|
| Slide 3:
System Requirements |
This tutorial is recorded using,
|
| Slide 4: Prerequisite |
|
| [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
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.
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 |
|
| 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> |
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]
|
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> |
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: |
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]
|
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:
|
| 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. |
