Bootstrap 5 Input group Sass

Last Updated : 23 Jul, 2025

Bootstrap 5 Input group SASS has a set of variables with default values that can be changed to customize the Input groups.

SASS variables for Input group:

$input-group-addon-padding-y: This variable is used for padding in the y-axis
$input-group-addon-padding-x: This variable is used for padding in the x-axis
$input-group-addon-font-weight: This variable is used for the font Weight of the input group
$input-group-addon-color: This variable is used for the color of the input group
$input-group-addon-bg: This variable is used for the background color of the input group
$input-group-addon-border-color: This variable is used for the border color of the input group

Steps to override SCSS of Bootstrap:

Step 1: Install bootstrap using the 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.

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

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

Step 4: Include the CSS file in your HTML file.

<link rel="stylesheet" href="./assets/css/style.css">

Project Structure:

👁 Image

Syntax:

$input-group-addon-padding-y: value;
...
.input-group-text {
 padding: $input-group-addon-padding-y $input-group-addon-padding-x;
 @include font-size($input-font-size); 
 font-weight: $input-group-addon-font-weight;
 ...
}

Example 1: Various SASS variables are discussed in this example

style.scss

style.css

index.html

Output:

👁 Image

Example 2: Various SASS variables are discussed in this example and their default values are changed

style.scss

style.css

index.html

Output:

👁 Image