Category: 5. Badges, Progress Bar & Other

  • 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…