Logo

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 list. To create a basic list group,

  • Add the .list-group class to the <ul> element to create list.
  • Add the .list-group-item to the <li> element to add list items to the list.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap List Groups Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1"> 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 </head>
 <body>
 <div class="container">
   <h2>Basic List Group</h2>
   <ul class="list-group">
     <li class="list-group-item">Item 1</li>
     <li class="list-group-item">Item 2</li> 
     <li class="list-group-item">Item 3</li>
     <li class="list-group-item">Item 4</li>
   </ul>
 </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Active State – Bootstrap 4 allows you to highlight your list item to show current active selection. To make list item active, add the .active class to the <li> element. The .active class adds the blue (primary) background color to the active list item.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap List Groups Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> 
 </head>
 <body>
 <div class="container">
   <h2>Active Item in a List Group</h2><br>
   <ul class="list-group">
     <li class="list-group-item active">Active Item</li>
     <li class="list-group-item">Item 2</li> 
     <li class="list-group-item">Item 3</li>
     <li class="list-group-item">Item 4</li>
   </ul>
 </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body> 
 </html>

Output

List Group with Linked Items – You can also convert the list items into links. To create a list group with linked item,

  • Add the <div> element instead of <ul> element and <a> element instead of <li> element.
  • Add .list-group class to the <div> element
  • Add .list-group-item class to the <a> element. If you want hover effect when you move cursor on the list item then also add .list-group-item-action class which is totally optional. This class provides gray background color on hover.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap List Groups Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> 
 </head>
 <body>
 <div class="container">
   <h2>List Group With Linked Items</h2>
   <div class="list-group">
     <a href="#" class="list-group-item list-group-item-action">Item 1</a>
     <a href="#" class="list-group-item list-group-item-action">Item 2</a>
     <a href="#" class="list-group-item list-group-item-action">Item 3</a> 
     <a href="#" class="list-group-item list-group-item-action">Item 4</a>
   </div>
 </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Disabled Item – You can also make your list items disabled. The disabled links turns into the light gray color. To create a disabled list item, add .disabled class along with the .list-group-item class to the <a> element.

Note: Some disabled links require custom JavaScript to fully disable their action.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap List Groups Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 </head>
 <body> 
 <div class="container">
   <h2>List Group With a Disabled Item</h2><br>
   <div class="list-group">
     <a href="#" class="list-group-item disabled">Disabled item</a>
     <a href="#" class="list-group-item disabled">Disabled item</a>
     <a href="#" class="list-group-item">Item 3</a>
     <a href="#" class="list-group-item">Item 4</a>
   </div> 
 </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 List Groups

Flush/Removed Borders – Bootstrap 4 provides some predefined classes that allows you to remove some border and round corners from the list to represent list group item edge to edge such as cards. To create a Flush/removed border list group, add the .list-group-flush class along with the .list-group class to the <ul> element.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap List Groups Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 </head> 
 <body>
 <div class="container">
   <h2>Flush / Remove Borders</h2><br>
   <ul class="list-group list-group-flush">
     <li class="list-group-item">Item 1</li>
     <li class="list-group-item">Item 2</li> 
     <li class="list-group-item">Item 3</li>
     <li class="list-group-item">Item 4</li>
     <li class="list-group-item">Item 5</li>
   </ul>
 </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> 
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 List Groups

Horizontal List Groups – The default layout of the list group is in the vertical order. But with the help of bootstrap 4, you can also place the list items horizontal (side by side) instead of vertical order in a list group. To create a horizontal list group,

  • Add the .list-group-horizontal class along with the .list-group class to the <ul> element.
  • Add .list-group-item class to the <li> element to add list items in a list.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap List Groups Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> 
 </head>
 <body>
 <div class="container">
   <h2>Horizontal List Groups</h2><br>
   <ul class="list-group list-group-horizontal">
     <li class="list-group-item">Item 1</li>
     <li class="list-group-item">Item 2</li> 
     <li class="list-group-item">Item 3</li>
     <li class="list-group-item">Item 4</li>
     <li class="list-group-item">Item 5</li>
   </ul>
 </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> 
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 List Groups

Contextual Classes – You can also make your list more stylish and elegant by providing different background colors to the list items with the help of contextual classes. The contextual color classes are:-

  • list-group-item-success
  • list-group-item-danger
  • list-group-item-info
  • list-group-item-secondary
  • list-group-item-warning
  • list-group-item-primary
  • list-group-item-dark
  • list-group-item-light

You can use any of the mentioned classes above to provide the background color in list items.

To create a list groups with colored background, add contextual color class (.list-group-item-*) along with the .list-group-item to the <li> element.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap List Groups Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1"> 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 </head>
 <body>
 <div class="container">
   <h2>List Group With Contextual Classes</h2><br>
   <ul class="list-group"> 
     <li class="list-group-item list-group-item-success">Item 1</li>
     <li class="list-group-item list-group-item-secondary">Item 2</li>
     <li class="list-group-item list-group-item-info">Item 3</li>
     <li class="list-group-item list-group-item-warning">Item 4</li>
     <li class="list-group-item list-group-item-danger">Item 5</li>
     <li class="list-group-item list-group-item-primary">Item 6</li>
     <li class="list-group-item list-group-item-dark">Item 7</li> 
     <li class="list-group-item list-group-item-light">Item 8</li>
   </ul>
 </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 List Groups

Link items with contextual classes – Like colorful list items you can also make colorful links as well. To create link items with contextual classes,

  • Add .list-group class to the <div> element.
  • Add .list-group-item-action class along with the contextual color (.list-group-item-*) class and .list-group-item class to the <a> element.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap List Groups Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> 
 </head>
 <body>
 <div class="container">
   <h2>Linked Items With Contextual Classes</h2><br>
   <div class="list-group">
     <a href="#" class="list-group-item list-group-item-action">Action item</a>
     <a href="#" class="list-group-item list-group-item-action list-group-item-success">Item 1</a>
     <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Item 2</a> 
     <a href="#" class="list-group-item list-group-item-action list-group-item-info">Item 3</a>
     <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Item 4</a>
     <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Item 5</a>
     <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Item 6</a>
     <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Item 7</a>
     <a href="#" class="list-group-item list-group-item-action list-group-item-light">Item 8</a>
   </div>
 </div> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 List Groups

List Group with Badges – Bootstrap 4 allows you to add icons and additional information to the list items to make them more stylish and helpful also. To create a list group with badges,

  • Add .list-group class to the <ul> element.
  • Add .list-group-item class along with some helper classes such as .d-flex class, .justify-content-between class, and .align-items-center class to the <li> element. The helper classes are used to provide proper alignment to the list items in a list group.
  • Add .badge class along with the .badge-primary class and .badge-pill class to the <span> element to add the badges into the list items.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap List Groups Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 </head>
 <body>
 <div class="container mt-3"> 
   <h2>List Group With Badges</h2><br>
   <ul class="list-group">
     <li class="list-group-item d-flex justify-content-between align-items-center">
       Inbox
       <span class="badge badge-primary badge-pill">64</span>
     </li>
     <li class="list-group-item d-flex justify-content-between align-items-center">
       Notifications 
       <span class="badge badge-primary badge-pill">45</span>
     </li>
     <li class="list-group-item d-flex justify-content-between align-items-center">
       Messages
       <span class="badge badge-primary badge-pill">39</span> 
     </li>
   </ul>
 </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body> 
 </html>

Output

Bootstrap 4 List Groups

Related Topics

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.

Bootstrap Panels

A bootstrap panel is used to create bordered box with some padding around its content. It is created with the .panels classes, and .panel-body classes. There are following classes of the panel: Panel header Panel...

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

Bootstrap 4 Grid System

Bootstrap 4 Grid Systems Bootstrap offers a responsive and mobile-first grid system with the help of which we can divide the screen of the web browser into 12 horizontal parts. It has predefined classes...

4 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 Buttons Groups

Bootstrap 4 Button Group Bootstrap 4 provides a feature button group that helps in creating a series of buttons together in a group. Basic Button Group  The .btn-group class is used within the <div> tag to create a...

6 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 4 Flex

Bootstrap 4 Flex Flex is a Bootstrap 4 component used to manage the layout, navigation bar, grid columns, sizing, alignment, and other components. The flexbox or flex utility is the replacement...

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

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 Utilities

Bootstrap 4 Utilities Bootstrap 4 utilities also known as helper classes that are used to add more style to the components. Utilities are used to make the website or webpage more stylish or elegant....

10 minutes read.

Bootstrap First Example

1) Add HTML5 doctype Before starting the example of Bootstrap, we should know about the some basic rules of Bootstrap. We have to add HTML5 doctype with lang element and CSS properties. <!DOCTYPE html>   <html lang="en">     <head>       <meta charset="utf-8">      </head>   </html> 2) Bootstrap...

2 minutes read.

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

Bootstrap 4 Alerts Bootstrap 4 offers alerts that are used to provide feedback messages on the user’s actions. There is no boundation of text length in the alerts. Alerts can be created...

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