How to Override Bootstrap CSS
This article is about a famous CSS UI framework known as Bootstrap. We will discuss the process of overriding the Bootstrap CSS with our custom styling.
Overview of Bootstrap
A responsive website can be created more quickly and easily with Bootstrap CSS than with plain CSS alone.
It is because this open-source toolkit offers pre-designed templates and components, allowing you to quickly and easily create layouts with crucial design components like Bootstrap buttons, forms, and tables.
But the procedure isn’t as straightforward as just copying and pasting these pieces of reusable code. First, you should customize the Bootstrap templates and components to confirm that the website accurately represents your distinctive branding.
For instance, you might prefer a custom colour to one of Bootstrap’s ten colour utility classes. Alternately, you might want to modify the grid layout’s breakpoints in Bootstrap.
You might also want to include customized classes like the .btn-cstm class for unique buttons. Although it’s not advisable, you can directly edit the Bootstrap core files to make adjustments to your website.
Modify Bootstrap CSS
Direct modifications to the Bootstrap default stylesheet will become challenging. It makes it harder to recall your changes and makes updating to a revamped version of Bootstrap much more difficult.
Since you must replace the core files when upgrading, all personalizations will be lost. However, it is possible to make changes without modifying the Bootstrap source code.
Let us look at the procedure in more detail.
Override Bootstrap Styling
Add another external style sheet if your website needs to add customized styling other than Bootstrap. It will apply these overridden styles to your classes and id selectors based on how you load the two styles sheets:
- The one with Bootstrap.
- The one with your custom stylesheet.
For example, there is a class in Bootstrap for buttons, i.e., btn-primary. For that class, the font-size set by the Bootstrap CSS is 16px. We can override this class in our custom stylesheet if we need to change the font size to 21px.
The first step is to make a custom style sheet, say customStyles.css. The style sheet will look like this:
.btn-primary{
font-size:21px;
}
You can include this sheet in your HTML page after you include the Bootstrap CSS like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="customStyling.css">
</head>
<body>
<h1>Custom Bootstrap demo</h1>
<button class="btn-primary">Demo</button>
</body>
</html>
You can see from the output that properties other than font-size are inherited from the default Bootstrap CSS, and only the font-size property is updated to a new value.
It is one of the easiest approaches to override the Bootstrap CSS and add your custom styling to your website.