Bootstrap 5 List group SASS
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: 2 rem; $list-group-item-padding-y: 1 rem; $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: 2 rem; --bs-list-group-item-padding-x: 1 rem; --bs-list-group-item-padding-y: 1 rem; --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" >w3wiki</ 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:
Example 2: In this example, making use of some of the above variables.
custom.scss
SCSS
$list-group-action- color : green ; $list-group-action-active- color : black ; $list-group-action-active-bg: green ; @import "./node_modules/bootstrap/scss/bootstrap" |
CSS file created after conversion
custom.css
CSS
.list-group { --bs-list-group- color : #212529 ; --bs-list-group-bg: #fff ; --bs-list-group- border-color : rgba( 0 , 0 , 0 , 0.125 ); --bs-list-group- border-width : 1px ; --bs-list-group-border-radius: 0.375 rem; --bs-list-group-item-padding-x: 1 rem; --bs-list-group-item-padding-y: 0.5 rem; --bs-list-group-action- color : green ; --bs-list-group-action-hover- color : green ; --bs-list-group-action-hover-bg: #f8f9fa ; --bs-list-group-action-active- color : black ; --bs-list-group-action-active-bg: green ; --bs-list-group-disabled- color : #6c757d ; --bs-list-group-disabled-bg: #fff ; --bs-list-group-active- color : #fff ; --bs-list-group-active-bg: #0d6efd ; --bs-list-group-active- border-color : #0d6efd ; 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" >w3wiki</ h1 > < h5 class = "text-success" >Bootstrap 5 List Group SASS</ h5 > < div class = "container pt-3" style = "width:850px;" > < h6 >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 > < a href = "#" class="list-group-item list-group-item-action"> Geography </ a > </ div > </ div > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/list-group/#sass
Contact Us