1. Home

How To Create a List Group with Badges

Learn how to create a List Group with Badges, using CSS

List Group with Badges

  • Inbox 2
  • Other 5
  • Saved
  • Stuff
  • Old
    • Try it Yourself »

    How To Create a List Group

    Step 1) Add HTML:

    Example

    <ul>
      <li>Inbox <span class="badge">2</span></li>
      <li>Other <span class="badge">5</span></li>
      <li>Saved</li>
      <li>Stuff</li>
      <li>Old</li>
    </ul>

    Step 2) Add CSS:

    Example

    /* Transform a basic list into a customized list group */
    ul.list-group {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    ul.list-group li {
      border: 1px solid #ddd;
      margin-top: -1px; /* Prevent double borders */
      background-color: #f6f6f6;
      padding: 12px;
    }

    /* Style badges inside the list group */
    ul.list-group .badge {
      background-color: red;
      color: #fff;
      font-weight: bold;
      border-radius: 50%;
      padding: 5px 10px;
      text-align: center;
      margin-left: 5px;
    }
    Try it Yourself »
    Tip: Go to our CSS List Tutorial to learn more about HTML lists and how to style them.

    Categories

    HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

    Contact US