Overriding Bootstrap CSS

Current Location：Home > Learning > WEB FRONT-END > CSS >

Vue React JavaScript Angular CSS HTML

Overriding Bootstrap CSS

Author：JIYIK Last Updated：2025/04/19 Views：

This article introduces the famous CSS UI framework Bootstrap. We will discuss the process of overriding Bootstrap CSS with custom styles.

Bootstrap Overview

Using Bootstrap CSS makes it quicker and easier to create responsive websites than using pure CSS alone.

That’s because this open source toolkit provides pre-designed templates and components that enable you to quickly and easily create layouts using key design components like Bootstrap buttons, forms, and tables.

But the process isn’t as simple as copying and pasting this reusable code. First, you should customize the Bootstrap templates and components to confirm that the site accurately represents your unique brand.

For example, you might prefer a custom color instead of one of Bootstrap's ten color utility classes. Or, you might want to modify the breakpoints of a grid layout in Bootstrap.

You may also want to include custom classes, such as a .btn-cstm class for a unique button. While not advisable, you can edit the Bootstrap core files directly to make adjustments for your site.

Modify Bootstrap CSS

Modifying the Bootstrap default stylesheet directly becomes challenging. This makes it harder to recall your changes and makes it harder to update to improved versions of Bootstrap.

Since core files must be replaced when upgrading, all customizations will be lost. However, it is possible to make changes without modifying the Bootstrap source code.

Let's look at the process in more detail.

Overriding Bootstrap styles

If your site requires custom styles beyond those of Bootstrap, add another external stylesheet. It will apply these overridden styles to your class and id selectors based on how you load both stylesheets:

Comes with Bootstrap.
With custom stylesheet.

For example, in Bootstrap there is a class for buttons, namely btn-primary. For this class, the font size set by Bootstrap CSS is 16px. If we need to change the font size to 21px, we can override this class in a custom stylesheet.

The first step is to make a custom stylesheet, e.g. customStyles.cssthe stylesheet will look like this:

.btn-primary{
    font-size:21px;
}

After including the Bootstrap CSS, you can include this sheet in your HTML page 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>

As you can see from the output, all properties except font-size are inherited from the default Bootstrap CSS, and only the font-size property is updated to the new value.

This is one of the easiest ways to override the Bootstrap CSS and add custom styles to your website.

Previous：Rotating text using CSS

Next: None

For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.

Article URL：

JIYIK CN >