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 Collapse

Bootstrap 4 Collapse Collapse is a bootstrap component that is similar to the dropdown button. Collapse is used to hide or show the content such as paragraphs, sentences, etc.  When we click on a...

4 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 With CSS

← Prev Next → ...

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

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

Bootstrap 4 Images Bootstrap provides several classes for images to make them responsive and also helps to give some style to the images. Image Shapes Rounded Corners Bootstrap 4 offers .rounded class that makes the corners...

5 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 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 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 Tooltip

Bootstrap 4 Tooltip Tooltip Bootstrap 4 offers a tooltip component, a small popup box that appears when you move the cursor over an element such as buttons or any highlighted element. It...

3 minutes read.

Bootstrap 4 Colors

Bootstrap 4 Colors Bootstrap 4 consists of classes that are used to set colors according to the context of the element, and with the help of these classes, we can read...

2 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 Spinners

Bootstrap 4 offers spinner is a loading indicator that is used to display the loading state of any component or web page. The spinner is also known as a loader...

7 minutes read.

Bootstrap 4 Icons

Bootstrap 4 Icons Bootstrap 3 contains the default icon library. But in bootstrap 4, you have to include the external icon library by yourself. Many free icon libraries are available such...

2 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 Pagination

Bootstrap 4 Pagination Bootstrap pagination is used to show the existence of a series of web pages of the website. It allows navigation on multiple pages of a website. In pagination, there is a block...

9 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 Pager

← Prev Next → ...

1 minute read.

Bootstrap 4 Inputs

Bootstrap Inputs Bootstrap Form Inputs – Several pre-defined input types are available in HTML and Bootstrap. These input types help in styling the forms. When an input type is specified in the form, it means...

10 minutes read.