Create navigation bar in Bootstrap

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

Create navigation bar in Bootstrap

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:

The output will look like the following:

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:

The output will look like the following:

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:

The output will look like the following:

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:

The output will look like the following:

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:

The output will look like the following:

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:

The output will look like the following:

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:

The output will look like the following:

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:

The output will look like the following:

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.