Logo

Bootstrap List group

Bootstrap list group provides a group of a list of items. The most basic list is an unordered list. We can use <ul> element with .list-group class and <li> element with .lsit-group-item. Let us see an example of Bootstrap List Groups: 
<h1>Example of Basic List Groups</h1>  
<ul class="list-group">  
  <li class="list-group-item">First item</li>  
  <li class="list-group-item">Second item</li>  
  <li class="list-group-item">Third item</li>  
</ul>
Try Now

List Group With Badges

We can also use badges with list group. It will automatically position the right. To create a badge, you have to use the <span> element with class .badge inside the list item. Let us see an example of Bootstrap List Group With Badges: 
<div class="container">  
  <h2>List Group With Badges</h2>  
  <ul class="list-group">  
    <li class="list-group-item">Vote <span class="badge">12</span></li>  
    <li class="list-group-item">Not vote <span class="badge">5</span></li>  
    <li class="list-group-item">Remaining Vote<span class="badge">23</span></li>  
  </ul>  
</div>
Try Now

List Group With Linked Items

We can create a hyperlink of the list group. By default it is grey color when hover on it. You have to use <div> element instead of <ul> and <a> instead of <li> element. Let us see an example of Bootstrap List Group With Linked Items: 
<div class="container">  
  <h2>Example of List Group With Linked Items</h2>  
  <div class="list-group">  
    <a href="#" class="list-group-item">First item with link</a>  
    <a href="#" class="list-group-item">Second item with link</a>  
    <a href="#" class="list-group-item">Third item with link</a>  
  </div>  
</div>
Try Now

Bootstrap Active State

The bootstrap active state is used to highlight the current item. We have to use .active class. Let us see an example of Bootstrap Active State: 
<div class="container">  
  <h2>Example of Active Item in a List Group</h2>  
  <div class="list-group">  
    <a href="#" class="list-group-item active">First item</a>  
    <a href="#" class="list-group-item">Second item</a>  
    <a href="#" class="list-group-item">Third item</a>  
  </div>  
</div>
Try Now

Bootstrap Disabled state

The bootstrap disabled state is used to disabled the current item. You have to use .disabled class. Let us see an example of Bootstrap Disabled State: 
<div class="container">  
  <h2>Example of List Group With a Disabled Item</h2>  
  <div class="list-group">  
    <a href="#" class="list-group-item disabled">First item with disabled</a>  
    <a href="#" class="list-group-item">Second item</a>  
    <a href="#" class="list-group-item">Third item</a>  
  </div>  
</div>
Try Now

Bootstrap Contextual Classes

Bootstrap contextual classes is used to color the list items. There are various list item's color classes:
  • .list-group-item-success
  • .list-group-item-info
  • .list-group-item-warning etc.
Let us see an example of Bootstrap Contextual Classes 
<div class="container">  
  <h3> Excample of List Group With Contextual Classes</h3>  
  <ul class="list-group">  
    <li class="list-group-item list-group-item-success">First item</li>  
    <li class="list-group-item list-group-item-info">Second item</li>  
  </ul>  
  <h3>Example of Linked Items With Contextual Classes</h3>  
  <p>Move the mouse over the linked items.</p>  
  <div class="list-group">  
    <a href="#" class="list-group-item list-group-item-success">First item</a>  
    <a href="#" class="list-group-item list-group-item-info">Second item</a>  
  </div>  
</div>
Try Now

Related Topics

Bootstrap Validation Example

Validation We can provide valuable and actionable feedback to the users through an HTML form validation. It happens via custom styles or behaviors of default browsers and JavaScript. How does validation work...

4 minutes read.

Bootstrap Typography

Bootstrap provides simple and easily customized typography for headings, body text, lists, and many more. Headline <h1> to <h6> By default, Bootstrap has HTML headings (<h1> to <h6>) that are given below: Example <h1>h1. Bootstrap heading</h1>   <h2>h2. Bootstrap heading</h2>   <h3>h3. Bootstrap heading</h3>   <h4>h4. Bootstrap heading</h4>   <h5>h5. Bootstrap heading</h5>   <h6>h6. Bootstrap heading</h6> Try Now ←...

1 minute read.

Bootstrap 4 navbar

A navigation navbar or navbar uses in every website to make it more user-friendly. Navigating through the website is easier, and the user can instantly search for the topic of...

8 minutes read.

Bootstrap 4 Content

Typography Typography is used for styling and formatting the content. It also helps in creating customized headings, sub-headings, lists, paragraphs, etc. Headings Bootstrap 4 offers HTML heading <h1> to <h6> that has bolder...

8 minutes read.

Bootstrap Toast Example

What are toasts? Toasts are similar to notifications, and they are lightweight and act as push notifications from mobile and desktop operating systems. They’re built using flexbox in Bootstrap. They can...

4 minutes read.

Bootstrap Multiselect Dropdown

What is a multi-select Dropdown? Multi-select dropdown lists are used when we want to select multiple options for a particular record. Usually, dropdown lists provide the feature of choosing just one value...

4 minutes read.

Bootstrap Time Picker Example

What is a Bootstrap Time picker? It is used to display the time in hours, minutes and seconds from a dropdown menu. In this section, we will create an example to...

4 minutes read.

Bootstrap Grid System Example

Bootstrap Grid System Example Stacked to horizontal – In stacked to the horizontal grid system, the grid columns are stacked on top of each other on extra small devices and becomes...

7 minutes read.

Bootstrap Navigation bar

Navigation Bars In Bootstrap, We can create navigation bar like a navigation header. It is placed at the top of the page. We can collapse or extend it according to screen...

3 minutes read.

Bootstrap 4 Buttons

Bootstrap Buttons Bootstrap provides many custom button styles. These buttons are used in forms and dialog boxes for actions. Bootstrap offers various predefined classes for providing styles to buttons. There are many classes that are used...

7 minutes read.

Text Shadows in CSS

Text shadows are created with the text-shadow CSS property. It takes a list of shadows separated by commas to be applied to the text and any of its styles. Each...

5 minutes read.

Bootstrap 4 Carousel

Bootstrap 4 Carousel Bootstrap 4 offers a carousel component, which is also known as a slider or slideshow. The carousel is used for the dynamic representation of content using images with...

7 minutes read.

Bootstrap Notification Bubble

What is a notification bubble? Bubbles are built into the Notification system. They float on top of the website or the button to indicate pending notifications. Bubbles can be expanded to reveal...

5 minutes read.

Bootstrap Wells

In Bootstrap, well are used to add a rounded border around an element. It is default some padding and gray background color. It is like a container that displays the content....

1 minute read.

Bootstrap 4 Margin classes

Bootstrap 4 contains a variety of brief, responsive margin and padding utility classes to change the appearance of an element. The Bootstrap 4 margin classes use for the outer spacing of...

8 minutes read.

Bootstrap Input groups

Bootstrap 4 Input groups The input group is a component of Bootstrap 4, which is used to create interactive and stylish form controls. With the help of input groups, you can easily customize the input...

8 minutes read.

Bootstrap Badges and Labels

Bootstrap Badges Bootstrap Badges are numerical indicators. It is used to show that how many items are associated with a link.The .badge class is used to create of Bootstrap Badges. Let us see...

2 minutes read.

CakePHP Layouts & Elements

A layout includes a presentation code that can be wrapped out in your view. It means that what you want to see in your view should be well-positioned in layout. When you create...

9 minutes read.

Bootstrap 4 Dropdowns

Bootstrap Dropdowns Bootstrap 4 provides a dropdown component, which is a toggle and contextual layout, used to display a predefined list of links. It allows the user to select a value from the dropdown...

15 minutes read.

Difference between bootstrap.css and bootstrap-theme.css

The "bootstrap.css" uses to create a website with pre-existing designs and context. It uses basic Bootstrap classes like rows and columns with a CSS styling tool. The website is styled...

5 minutes read.