-
Bootstrap Progress Bars
In this tutorial you will learn how to create progress bars using Bootstrap. Creating Progress Bar with Bootstrap Progress bars can be used for showing the progress of a task or action to the users. The following example will show you how to create a simple progress bar with vertical gradient. Example — The output…
-
Creating Pill Badges
Similarly, you can create pill shape badges (i.e. badges with more rounded corners) using the .rounded-pill modifier class, as shown in the following example: Example — The output of the above example will look something like this: Showing Counter with Badges You can also use badges as part of links or buttons to provide a counter, such…
-
Bootstrap Badges
In this tutorial you will learn how to create badges with Bootstrap. Creating Badges with Bootstrap Badges are generally used to indicate some valuable information on the web pages such as important heading, warning messages, notification counter, etc. The following example will show you how to create inline badges using the Bootstrap. Example — The…
-
Pagination with Disabled and Active States
Links inside Bootstrap pagination can further be customized for different circumstances, like when user approaches to an end or start, or indicating current page number to the user. Use the class .disabled for making the links disabled and .active to indicate the current page. Example — The output of the above example will look something like this: Note: The .disabled class only…
-
Bootstrap Pagination
In this tutorial you will learn how to create pagination with Bootstrap. Creating Pagination with Bootstrap Pagination is the process of organizing content by dividing it into separate pages. Pagination is used in some or other form quite often in almost every web application, for instance it is used by search engines for displaying a…
-
Bootstrap Breadcrumbs
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.…
-
Bootstrap Edge-to-Edge Accordions
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…
-
Bootstrap Accordion with Plus Minus Icons
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:
-
Bootstrap Accordion
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…
-
Changing the Color Scheme of Navbars
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…