How to Customize Bootstrap 5? - Coding

To customize Bootstrap 5, adjust its appearance by using custom CSS to modify default styles or by utilizing Sass variables to customize design elements like colors, typography, and spacing. These methods enable you to control your project’s visual presentation.

Table of Content

Custom CSS
Modifying Sass Variables

Custom CSS

In this approach, CSS rules override Bootstrap’s default styles. Custom CSS can be applied to specific components or globally across the project. This HTML document uses Bootstrap for styling. It customizes button styles with rounded corners and bold text. It includes two buttons styled with Bootstrap’s “btn” classes. The Bootstrap JavaScript bundle enhances component functionality.

Example: The example below shows how to customize Bootstrap 5 using Custom CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Custom CSS Example</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <style>
        /* Custom CSS to override Bootstrap's default button styles */
        .btn {
            border-radius: 20px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="container my-5">
        <h1>Custom CSS Example</h1>
        <button type="button" 
                class="btn btn-success">
          Success Button
          </button>
        <button type="button" 
                class="btn btn-secondary">
          Secondary Button
          </button>
    </div>

    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
      </script>
</body>

</html>

Output:

Customize Bootstrap 5 with Custom CSS

Using Sass Variables

Bootstrap 5 is built with Sass, a powerful CSS preprocessor. By modifying Bootstrap’s Sass variables, developers can change fundamental aspects of the framework, such as colors, typography, and layout settings. This approach allows for more comprehensive customization and ensures consistency throughout the project.

Run the below command for package.json file:

npm init -y

Install Bootstrap and the required dependencies by running the following command:

npm install [email protected] sass

Example: The example below shows how to customize Bootstrap 5 using Sass Variables.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Modifying Sass Variables Example</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="container my-5">
        <h1>Modifying Sass Variables Example</h1>
        <button type="button" 
                class="btn btn-primary">
          Primary Button
          </button>
        <button type="button" 
                class="btn btn-secondary">
          Secondary Button
          </button>
    </div>

    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

CSS

// Override Bootstrap's primary color
$primary: #ff6b6b;

// Import Bootstrap
@import "../../node_modules/bootstrap/scss/bootstrap";

Run the below command to compile the Sass file to CSS:

//This command will create a new styles.css file in your project directory, which you can then link to your HTML file.
npx sass styles.scss styles.css

Open the index.html file in your web browser to see the modified Bootstrap styles applied to the buttons.

npx sass --watch styles.scss styles.css

Output:

Customize Bootstrap 5 with Sass Variables

Reffered: https://www.geeksforgeeks.org

Bootstrap

Related
How to Change Bootstrap Navbar Collapse Breakpoint?
How to Create Multipage Website Using Bootstrap?
How to Customized Bootstrap 5 Checkbox?
How to fix Spacing Classes in Bootstrap?
How to change "Choose file" Text using Bootstrap?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	15