Bootstrap 5 List group SASS

Last Updated : 24 Jan, 2023

Bootstrap 5 List Group SASS can be used to change the default values provided for the list group by customizing scss file of bootstrap 5.

SASS variables of List Group:

$list-group-color: This variable provides the text color of the list group. By default, it is gray color.
$list-group-bg: This variable provides the background color of the list group. By default, it is white color.
$list-group-border-color: This variable provides the border color of the list group. By default, it is black color with an opacity of 0.125
$list-group-border-width: This variable provides the border width of the list group. By default, it is 1px.
$list-group-border-radius: This variable provides the border radius of the list group. By default, it is 0.375rem.
$list-group-item-padding-y: This variable provides the top and bottom padding of the item in the list group. By default, it is 0.5rem
$list-group-item-padding-x: This variable provides the left and right padding of the item in the list group. By default, it is 1rem
$list-group-item-bg-scale: This variable provides the contrast of the background color of the list group item. By default, it is -80%
$list-group-item-color-scale: This variable provides the contrast of the text color of the list group item. By default, it is 40%
$list-group-hover-bg: This variable provides the background color of the list group on hover. By default, it is gray color.
$list-group-active-color: This variable provides the text color of the list group item which is active. By default, it is white color.
$list-group-active-bg: This variable provides the background color of the list group item which is active. By default, it is blue color.
$list-group-active-border-color: This variable provides the border color of the list group item which is active. By default, it is blue color.
$list-group-disabled-color: This variable provides the text color of the list group item which is disabled. By default, it is gray color.
$list-group-disabled-bg: This variable provides the background color of the list group item which is disabled. By default, it is white color.
$list-group-action-color: This variable provides the text color of the actionable list group. By default, it is gray color.
$list-group-action-hover-color: This variable provides the text color of the actionable list group on hover. By default, it is gray color.
$list-group-action-active-color: This variable provides the text color of the actionable list group on active. By default, it is white color.
$list-group-action-active-bg: This variable provides the background color of the actionable list group which is active. By default, it is gray color.

Steps to override scss of Bootstrap:

Step 1: Install bootstrap using following command:

npm i bootstrap

Step 2: Create your custom scss file and write the variable you want to override. Then include the bootstrap scss file using import.

$class_to_override: values;
@import "node_modules/bootstrap/scss/bootstrap"

Step 3: Convert the file to CSS using live server extension.

Step 4: Include the converted scss file to your HTML after the link tag of Bootstrap css

Project Structure: Here the custom scss file name is “custom.scss” and custom.css is converted file

Syntax:

$variable:value;
@import "./node_modules/bootstrap/scss/bootstrap"

Example 1: In this example, making use of some of the above variables.

custom.scss

SCSS

$list-group-color:white; 
$list-group-bg:green; 
$list-group-border-color:black; 
$list-group-border-width:5px; 
$list-group-border-radius:2rem; 
$list-group-item-padding-y:1rem; 
$list-group-hover-bg:rgba(green,0.8); 
$list-group-active-color:white; 
$list-group-active-bg:black; 
$list-group-active-border-color:black; 
$list-group-disabled-color:rgba(black,0.7); 
$list-group-disabled-bg:rgb(153, 238, 153); 
$list-group-action-hover-color:black; 
@import "./node_modules/bootstrap/scss/bootstrap"

CSS file created after conversion

custom.css

CSS

.list-group { 
  --bs-list-group-color: white; 
  --bs-list-group-bg: green; 
  --bs-list-group-border-color: black; 
  --bs-list-group-border-width: 5px; 
  --bs-list-group-border-radius: 2rem; 
  --bs-list-group-item-padding-x: 1rem; 
  --bs-list-group-item-padding-y: 1rem; 
  --bs-list-group-action-color: #495057; 
  --bs-list-group-action-hover-color: black; 
  --bs-list-group-action-hover-bg: rgba(0, 128, 0, 0.8); 
  --bs-list-group-action-active-color: #212529; 
  --bs-list-group-action-active-bg: #e9ecef; 
  --bs-list-group-disabled-color: rgba(0, 0, 0, 0.7); 
  --bs-list-group-disabled-bg: rgb(153, 238, 153); 
  --bs-list-group-active-color: white; 
  --bs-list-group-active-bg: black; 
  --bs-list-group-active-border-color: black; 
  display: flex; 
  flex-direction: column; 
  padding-left: 0; 
  margin-bottom: 0; 
  border-radius: var(--bs-list-group-border-radius); 
} 

index.html

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0"> 
    <title>Bootstrap 5 List Group SASS</title> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
          rel="stylesheet"> 
    <link rel="stylesheet" href="./custom.css"> 
    <script src= 
"node_modules/bootstrap/dist/js/bootstrap.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"> 
    </script> 
</head> 
  
<body class="text-center"> 
    <div class="container"> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <h5 class="text-success">Bootstrap 5 List Group SASS</h5> 
        <div class="container pt-3" style="width:850px;"> 
            <ul class="list-group"> 
                <li class="list-group-item">Java</li> 
                <li class="list-group-item disabled">C++</li> 
                <li class="list-group-item">Python</li> 
                <li class="list-group-item">Javascript</li> 
            </ul> 
            <h6 class="pt-3">List group with action</h6> 
            <div class="list-group"> 
                <a href="#" class="list-group-item  
                                   list-group-item-action active"> 
                    Maths 
                </a> 
                <a href="#" class="list-group-item  
                                   list-group-item-action"> 
                    Science 
                </a> 
                <a href="#" class="list-group-item  
                                   list-group-item-action"> 
                    History 
                </a> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Output

Example 2: In this example, making use of some of the above variables.