In this tutorial you will learn how to create breadcrumbs with Bootstrap. Creating Breadcrumbs with Bootstrap A breadcrumb is a navigation scheme that indicates current page’s location to the user within a website or application. Breadcrumb navigation can greatly enhance the accessibility of a website having a large number of pages or complex navigational hierarchy.…

You can optionally add the class .accordion-flush to the .accordion element to remove outer borders and rounded corners to create accordions that are edge-to-edge with their parent container. Let’s check out the following example to understand how it actually works: Example — The output of the above example will look something like this: Bootstrap Accordion with Independent Panels You…

You can also use plus minus icons in the Bootstrap accordion widget (in place of chevron down and up icons) with a few lines of custom CSS code. Let’s try out the following example: Example — The output of the above example will look something like this:

In this tutorial you will learn how to create accordion with Bootstrap. Creating Accordion Widget with Bootstrap Accordion is a series of panels stacked on the top of each other. Accordion menus and widgets are widely used in the web applications to manage the large amount of content and navigation lists in a small amount…

You can also change the color scheme of the navbar by using the .navbar-light for the light background colors, or .navbar-dark for the dark background colors. Then, customize it with the background color utility classes, such as .bg-dark, .bg-primary, and so on. Alternatively, you can also apply the CSS background-color property on the .navbar element yourself to customize the navbar theme, as shown in the following…

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…