Bootstrap/C3/Nav-in-Bootstrap/English

From Script | Spoken-Tutorial
Jump to: navigation, search
VISUAL CUE NARRATION
Slide: Title Welcome to the Spoken Tutorial on “Nav in Bootstrap”.
Slide 2:

Learning Objectives

In this tutorial, we will learn about:
  • Navigation
  • Navigation - methods
  • Horizontal alignment
  • Tabs and pills and
  • Fill and justify
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 a navigation as shown here, using Bootstrap classes.

This navigation will have four items: Home, Products, Offers and Feedback.

Let’s learn how to create them.

Slide: Nav
  • Using Bootstrap, we can create navigation components easily and quickly.
  • By using .nav class, all navigation components will have the same style.
Slide: Nav - Methods Basically, there are two methods for creating a navigation.
  • Using ul and ol tags
  • Using <nav> tag

Let’s create a navigation with the first method.

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.

Slide: Code File
  • The file used in this tutorial is available in the Code Files link on this tutorial page.
  • Please download and extract it.
  • Make a copy and then use it while practising.
Open Mypage.html in gedit Open the file Mypage.html in a text editor.

I have opened it in the gedit Text Editor.

[gedit - Mypage.html]
  • <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" href="#">Feedback</a>
After the first row, type the code as shown here.

We have added a new row with a column, for adding navigation.

Then we have used ul tag with .nav class.

In our navigation, we are creating four items.

So for each item, .nav-item class is used.

And for each link, .nav-link class is used.

These classes are used for proper styling, like text color, margin, padding, etc.

Notice that for the first item, I have used the active class here.

It is used to show the current active page, which is Mypage.html

I have used the disabled class for the last item.

So this navigation item will be disabled.

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 navigation with 4 items - Home, Products, Offers and Feedback.

Notice that all the four items have the same styling and the last item is disabled.

Now let’s create this navigation by using the second method i.e <nav> tag.
Switch to Mypage.html Switch to the Mypage.html file in the text editor.
[gedit - Mypage.html]

Update:

<nav class="nav"> <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>

Below this navigation row, type the code as shown here. Here, we have used <nav> tag instead of <ul> tag.

Notice that we have not used the .nav-item class.

Only the.nav-link class is required for styling link elements.

Press Ctrl + S Save the file.
Switch to Firefox Now switch to the browser and refresh the page.
[Firefox] We have successfully created the second navigation now.

Notice that there is no change in both the navigations.

So, we can create navigation using either of the methods.

By default, navigation is left-aligned.

For the rest of this tutorial, we will use the 2nd method of navigation. i.e <nav> tag.

Switch to Mypage.html Switch to the Mypage.html file in the editor.
[gedit - Mypage.html]

Delete:

  • <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" href="#">Feedback</a>
And delete the navigation created by using ul tag.
Press Ctrl + S Save the file.
Let’s see how to change the horizontal alignment of navigation.
Slide: Horizontal Alignment
  • In Bootstrap, by default, the navigation is left-aligned.
  • .justify-content-center class is used to center-align the navigation.
  • .justify-content-end class is used to right-align the navigation

Let’s try this.

Switch to Mypage.html Switch to the Mypage.html file in the editor.
[gedit - Mypage.html]

Update:

<nav class="nav justify-content-center">

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

Add .justify-content-center 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 navigation is center-aligned.

Let’s see some more designs of the navigation.

Slide: Tabs and Pills

tab-pill.png

Using Bootstrap classes, we can create tab and pill-based navigation.

In tab-based navigation, items get displayed like tabs as shown here.

While in pill-based navigation, they are displayed in the shape of pills, having rounded corners.

Slide: Tabs and Pills Classes
  • .nav-tabs class is used to generate a tabbed navigation.
  • .nav-pills class is used to generate pill-shaped navigation

Let’s try these.

Switch to Mypage.html Switch to the Mypage.html file in the editor.
[gedit - Mypage.html]

Update:

<nav class="nav justify-content-center nav-pills">

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

Add .nav-pills class as shown here.
Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Notice that the active item Home, is displayed in the shape of a pill.

Let’s do some more designing.

Slide: Fill and Justify
  • .nav-fill class:
    • It is used to extend the navigation items and fill all available width.
    • Every navigation item doesn't have the same width
  • .nav-justified class:
    • It is also used to extend the navigation items and fill all available width.
    • Every navigation item has the same width

Let’s try these.

Switch to Mypage.html Switch to the editor.
[gedit - Mypage.html]

Update:

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

Add .nav-justified class as shown here.
Press Ctrl + S Then save the file.
Switch to firefox And switch to the browser and refresh the page.
[Firefox]

Highlight the output

Notice that the navigation items are extended to fill all available width.

And every navigation item has the same width.

[Firefox]

Right click >> Inspect Element

Click on Responsive Design Mode

Now let’s see how this page will look with different screen sizes.

The present form layout is used for laptop and desktop devices.

Enable the responsive design mode.

After that, I will decrease the screen size.

Notice that the size of the navigation is adjusted according to the screen size.

This layout is used for tablets and mobile devices.

In this way we can create customised navigation using Bootstrap classes.
Only narration With this we have come to the end of this tutorial.

Let us now summarize.

Slide 6: Summary In this tutorial, we have learnt about:
  • Navigation
  • Navigation - methods
  • Horizontal alignment
  • Tabs and pills and
  • Fill and justify
Slide 8: Assignment As an assignment-
  • Open the Mypage.html file.
  • Add .nav-fill class to the navigation.
  • 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.

Contributors and Content Editors

Nancyvarkey, Nirmala Venkat

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Bootstrap/C3/Nav-in-Bootstrap/English&oldid=55478"