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 4 Grid System

Bootstrap 4 Grid System The bootstrap 4 grid system is used to create a responsive website layout. The bootstrap 4 offers a mobile-first flexbox grid system that allows you to divide...

4 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.

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 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...

3 minutes read.

Bootstrap Tables

We can create different types of responsive and awesome bootstrap table like: striped , border etc. Bootstrap Basic Table We can create a basic bootstrap table by using its class .table. It has...

3 minutes 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 Form

Bootstrap 4 Forms Bootstrap 4 provides forms, which are one of the essential components for web pages and web applications. It is an input-based component, used to collect user data with the help of...

8 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 Modal

Bootstrap 4 Modal The Modal is a component of Bootstrap 4, which is a dialog box or pop-up window. The modals are used to provide information or warning to the user, such as...

18 minutes read.

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.

Environment Setup

How to use Bootstrap? We can use bootstrap in our project either by downloading or by providing link of the library files. 1) Download Bootstrap files To download files, visit official site of bootstrap www.getbootstrap.com/download/ and...

1 minute 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 4 Filters

 Bootstrap 4 Filters Bootstrap 4 provides a filter component that is used to search an element from a list, table, etc. Bootstrap does not contain any component or utility that helps...

5 minutes read.

Bootstrap Contact Us page

What is a “Contact Us” page? A “Contact Us” page is a web page available on the websites of various companies, organisations etc., for its users to contact the organisation or...

5 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 4 Grid Classes

Bootstrap 4 Grid Classes Extra-small Grid – In the extra-small grid system class, when you create the grid (columns), the columns will not be stacked on top of each other on...

8 minutes 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 4 List Groups

Bootstrap 4 List Groups Bootstrap 4 offers List Group component, which is used to display a series of content in an organized way. The most common list group is an unordered...

13 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 4 Layout

Containers Containers are the essential elements of the bootstrap layout. It is required when we are using a bootstrap grid system. Containers can also be nested, but most layouts do not need nested containers. Bootstrap has...

3 minutes read.