forum

home / developersection / forums / horizontally colored list group items with badges

Ask Question

Horizontally colored list group items with badges

Ethan Karla 230 28-Jul-2021

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

bootstrap bootstrap 
Updated on 28-Jul-2021
Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

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
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy