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

Learning Objectives

• Navigation
• Navigation - methods
• Horizontal alignment
• Tabs and pills and
• Fill and justify

System Requirements

• Ubuntu Linux OS v 18.04
• Bootstrap 4.6.0
• HTML5
• gedit Text Editor and
• Firefox web browser

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.

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

Let’s learn how to create them.

• Using Bootstrap, we can create navigation components easily and quickly.
• By using .nav class, all navigation components will have the same style.

• Using ul and ol tags
• Using <nav> tag

Let’s create a navigation with the first method.

We will use the Mypage.html file which we saved earlier for this demonstration.

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

I have opened it in the gedit Text Editor.

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.

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

Update:

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.

Notice that there is no change in both the navigations.

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

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

Delete:

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

Update:

Let’s see some more designs of the navigation.

tab-pill.png

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.

• .nav-tabs class is used to generate a tabbed navigation.
• .nav-pills class is used to generate pill-shaped navigation

Let’s try these.

Update:

Highlight the output

Let’s do some more designing.

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

Update:

Highlight the output

And every navigation item has the same width.

Right click >> Inspect Element

Click on Responsive Design Mode

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.

Let us now summarize.

• Navigation
• Navigation - methods
• Horizontal alignment
• Tabs and pills and
• Fill and justify

• Open the Mypage.html file.
• Add .nav-fill class to the navigation.
• Save the file.
• Observe the output on the web browser.

Please download and watch it.

For more details, please write to us.

This is Nancy Varkey from the Spoken Tutorial project team, IIT Bombay signing off.

Thanks for watching.