How To Override Bootstrap Css

by

Bootstrap is a popular front-end framework that provides pre-designed components and styles to quickly build responsive websites. However, there might be cases where you want to customize the look and feel of your website and override the default Bootstrap styles. In this blog post, we will learn how to override Bootstrap CSS effectively.

Step 1: Add Your Custom CSS File

First, create a new custom CSS file (e.g., custom.css) in your project directory. This file will contain all your custom styles that will override the default Bootstrap styles.

Step 2: Load the Custom CSS File After Bootstrap

In your HTML file, make sure to load your custom CSS file after the Bootstrap CSS file. This is important because the order in which CSS files are loaded matters. The styles that are loaded later in the cascade will take precedence over the styles loaded earlier.

Here’s an example of how your HTML file should look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Custom Bootstrap Site</title>
    <!-- Load Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- Load Custom CSS -->
    <link rel="stylesheet" href="custom.css">
</head>
<body>
    ...
</body>
</html>

Step 3: Override Bootstrap CSS

Now that you have your custom CSS file loaded after the Bootstrap CSS, you can start overriding the default styles. To do this, you will need to target the same selectors used by Bootstrap and apply your own custom styles.

For example, let’s say you want to change the background color and font color of the Bootstrap navbar component. By default, the navbar has a light background color and dark text color. To override these styles, you can add the following CSS rules to your custom.css file:

.navbar {
    background-color: #333; /* your custom background color */
    color: #fff; /* your custom text color */
}

Similarly, you can override other Bootstrap components and styles by targeting the appropriate selectors and applying your custom styles.

Important Tips

  • Make sure to load your custom CSS file after the Bootstrap CSS file, as mentioned in step 2.
  • Always use the same selectors as Bootstrap to ensure that your custom styles take precedence.
  • When making changes to the Bootstrap styles, it’s a good practice to keep the original style properties as comments, so you can easily revert to the original styles in case something goes wrong.
  • If your custom styles are not taking effect, make sure your selectors are correct and try adding the !important keyword after the property value to guarantee precedence (e.g., color: #fff !important;). However, use this option sparingly, as it can make your CSS difficult to manage and maintain.

Conclusion

Overriding Bootstrap CSS is a straightforward process that allows you to customize the look and feel of your website. By creating a custom CSS file, loading it after the Bootstrap CSS, and targeting the same selectors, you can easily apply your own styles and make your website stand out from the crowd.