How to Customize Bootstrap 5?
Last Updated :
20 May, 2024
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.
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:
.png)
Customize Bootstrap 5 with Custom CSSUsing 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>
// 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:
.png)
Customize Bootstrap 5 with Sass Variables
Similar Reads
How To Customize Bootstrap With Sass? Bootstrap is one of the most popular CSS frameworks used to develop responsive websites quickly. However, using the default Bootstrap design can result in many websites looking the same. This is where Sass (Syntactically Awesome Style Sheets) comes in handy. By customizing Bootstrap with Sass, you c
4 min read
Bootstrap 5 Customizing the Grid Bootstrap Grid system is one of the most versatile layouts which we can use and it has different responsive variants which can be used to add custom responsiveness. Bootstrap Grid system provides a responsive layout with columns and gutters. Customizing the grid is essentially changing the number of
6 min read
How to Customize Bootstrap jQuery Plugins ? Bootstrap is a popular HTML, CSS, and JavaScript framework for building responsive, mobile-first web applications. It includes a library of jQuery plugins that provide various UI components and behaviors, such as modals, tabs, and carousels. While these plugins are useful out of the box, you may nee
4 min read
How to Customize Button Styles in Bootstrap ? Customizing button styles in Bootstrap involves modifying predefined classes or creating custom CSS rules. This allows alignment with brand identity, and differentiation, and ensures design consistency across projects. We can customize button styles in Bootstrap using different approaches as listed
3 min read
Bootstrap 5 Validation Custom styles Bootstrap 5 Validation Custom styles are used to add custom styles of bootstrap5 in your code. In order to add such custom styles we will have to add a novalidate boolean attribute to our <form>. After applying this attribute when you attempt to submit the form you can see the valid and invali
3 min read
Bootstrap 5 Text In this article, we will discuss how to change the alignment, weight, line height, wrapping, font size of the text, and more with the help of Bootstrap 5 utilities. Text alignment: We can use text alignment classes to align the text in different positions in different viewports.Text wrapping and ove
4 min read