My Blog

Search form is a very common component of the navbars and you have seen it on various website quite often. You can place various form controls within a navbar using the class .d-flex on the <form> element, as demonstrated in the following example: Example — The output of the above example will look something like this:

You can also place your logo image inside the navbar, instead of plain text. However, you need to set the logo height manually to fit it properly inside the navbar, as shown here: Example — The output of the above example will look something like this: Tip: Use the utility classes such as .ms-auto, .me-auto, .justify-content-between, etc. to align the nav…

In this tutorial you will learn how to create static and fixed positioned responsive navigation headers using the Bootstrap navbar component. Creating Navbar with Bootstrap You can use the Bootstrap navbar component to create responsive navigation header for your website or application. These responsive navbar will be collapsed on devices having small viewports like mobile…

Similarly, you can create pill based navigation by adding the class .nav-pills on the basic nav instead of class .nav-tabs, as shown in the following example: Example — The output of the above example will look something like this: Similarly, like nav tabs you can also add icons to your pills nav to make it more attractive: Example…

Simply, add the class .nav-tabs to the basic nav to generate a tabbed navigation, like this: Example — The output of the above example will look something like this: See the tutorial on Bootstrap tabs to learn how to create dynamic tab to toggle between content. You can also add icons to your tab items to make it more…

By default, navs are left-aligned, but you can easily align them to center or right using flexbox utilities. The following example uses the class .justify-content-center to align nav items to center. Example — The output of the above example will look something like this: Similarly, you can align nav items to right using the class .justify-content-end, like this:…

In this tutorial you will learn how to create navigation using Bootstrap nav component. Bootstrap Nav Components Bootstrap provides an easy and quick way to create basic navigation as well as components like tabs and pills which are very flexible and elegant. All the Bootstrap’s nav components, including tabs and pills, share the same base…