Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

Horizontally colored list group items with badges

Ethan Karla 378 28 Jul 2021

How to make a horizontally colored list group items with badges?

Ask by Ethan Karla

Updated 28 Jul 2021

1 Answers

Anonymous User 03 Aug 2021

To demonstrate how to use Horizontal colored List Group Items with badges in Bootstrap see the below example:

<!doctype html>

<html lang='en'>

<head>

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>

    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous'>

    <title>Horizontal Button Bootstrap</title>

</head>

<body>

    <div class='container'>

        <h2>Mindstick Software Private Limited</h2>

        <p>Horizontal colored List Group Items with badges</p>

        <ul class='list-group list-group-horizontal'>

            <li class='list-group-item list-group-item-warning list-group-item-action w-auto'>Home <span class='badge badge-warning badge-pill'>0</span></li>

            <li class='list-group-item list-group-item-primary list-group-item-action w-auto'>About <span class='badge badge-primary badge-pill'>4</span></li>

            <li class='list-group-item list-group-item-success list-group-item-action w-auto'>Services <span class='badge badge-success badge-pill'>12</span></li>

            <li class='list-group-item list-group-item-info list-group-item-action w-auto'>Portfolio <span class='badge badge-info badge-pill'>7</span></li>

            <li class='list-group-item list-group-item-danger list-group-item-action w-auto'>Newsletter <span class='badge badge-danger badge-pill'>12</span></li>

        </ul>

    </div>

</body>

</html>

Hope this will help you.

Happy Coding!

advertising

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.