VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-list-group-sass/

⇱ Bootstrap 5 List group SASS - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 List group SASS

Last Updated : 1 Aug, 2024

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

👁 Image

Syntax:

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

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

custom.scss

CSS file created after conversion

custom.css

index.html

Output:

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

custom.scss

CSS file created after conversion

custom.css

index.html

Output:

Reference: https://getbootstrap.com/docs/5.0/components/list-group/#sass

Comment

Explore