Create navigation bar in Bootstrap


In the previous lesson, readers of Taimienphi.vn learned about navigation components including Tab and Pill in Bootstrap, in the lesson below, Taimienphi.vn will guide you how to create navigation bar in Bootstrap to learn how. How to use.


Refer to the Bootstrap lesson below of Taimienphi.vn to learn how to create a navigation bar in Bootstrap.

Create navigation bar in Bootstrap

Table of Contents:
1. Create a simple navigation bar in Bootstrap
2. Add a drop-down menu for the navigation bar
3. Add search form in the navigation bar
4. Change the navigation bar background color
5. Create a fixed navigation bar in Bootstrap
5.1. Create a fixed navigation bar in the top corner
5.2. Create a fixed navigation bar below
5.3. Create a fixed menu bar when scrolling pages

1. Create a simple navigation bar in Bootstrap

We can use the navbar component to create responsive titles (i.e., titles that fit different device screen sizes) for a website or app.

We can also create different navigation bar variations, such as the navigation bar with drop down menus and search boxes.

For example: The following example illustrates how to create a simple static navigation bar with navigation links:

I create the navigation bar in bootstrap

The output will look like the following:

I created the navigation bar in bootstrap 2

In addition, if desired we can also use the logo to replace the plain text in the navigation bar. However, it should be noted that the logo height must be set manually to match the navigation bar height as in the example below:

Create a navigation bar in bootstrap 3

The output will look like the following:

Create a navigation bar in bootstrap 4

Note: We can use utility classes like.ml-auto, .mr-auto, .justify-content-between, … to align navigation links, forms, buttons, or text in the navigation bar.

2. Add a drop-down menu for the navigation bar

Alternatively, we can add a dropdown menu and a search box in the navigation bar as shown in the example below:

Create a navigation bar in bootstrap 5

The output will look like the following:

Create a navigation bar in bootstrap 6

Tips: To create undefined navigation bars on the top or bottom corners, we place the navigation bar anywhere in the .container, set web page width and content.

3. Add search form in the navigation bar

The search form is a fairly common element on the navigation bar of web pages. We can add various form controls and form elements in a navigation bar using the class .form-inline in the element form.

For example: The following example illustrates how to add a search form in the navigation bar:

I created the navigation bar in bootstrap 7

The output will look like the following:

I created the navigation bar in bootstrap 8

4. Change the navigation bar background color

To change the background color for the navigation bar, we use layers .navbar-light for bright background colors or .navbar-dark for a dark background color, then customize the background color by using a background color widget like .bg-dark, .bg-primary, ….

Also we can apply attributes CSS background-color on the element .navbar To customize the navigation bar theme, refer to the example below:

I created the navigation bar in bootstrap 9

The output will look like the following:

I created the navigation bar in bootstrap 10

5. Create a fixed navigation bar in Bootstrap

Bootstrap also includes a mechanism to create a fixed navigation bar in the top or bottom viewport corner and scroll with the content on the page.

5.1. Create a fixed navigation bar in the top corner

By applying utility class .fixed-top for the element .navbar to fix the navigation bar at the top of the viewport and not scroll with the page.

For example: The following example illustrates how to create a fixed navigation bar at the top of the viewport:

I created the navigation bar in bootstrap 11

The output will look like the following:

I created the navigation bar in bootstrap 12

5.2. Create a fixed navigation bar below

Similarly, we can add layers .fixed-bottom into the element .navbar to have the navigation bar at the bottom of the viewport like in the example below:

I created the navigation bar in bootstrap 13

The output will look like the following:

I created the navigation bar in bootstrap 14

5.3. Create fixed menu bar when scrolling pages

We can also create permanent navigation bars when scrolling pages using layers .sticky-top on the element .navbar as in the example below:

I created the navigation bar in bootstrap 15

The output will look like the following:

I created the navigation bar in bootstrap 16

Tip: Set content .navbar fixed in .container or .container-fluid to align and padding to fit the rest of the content.

Note: Remember more padding (at least 70px) into the top or bottom corners of the element body to prevent content located below the navigation bar while creating a fixed navigation bar at the top or bottom corners.

Also remember to add style sheet Customize after the main Bootstrap CSS file, otherwise the style sheets in the style sheet will be overwritten with the Bootstrap rules.

https://thuthuat.taimienphi.vn/tao-thanh-dieu-huong-rong-bootstrap-51131n.aspx
The above lesson on Taimienphi.vn has shown you how to create a navigation bar in Bootstrap. In the next lesson, Taimienphi.vn will guide you on how to create Breadcrumb in Bootstrap. In addition, if you have any questions or questions, you can leave your comments in the comment section below the article.

.

Add a Comment

Your email address will not be published. Required fields are marked *