CODEWITHSUNDEEP
htmlcssbootstrap-5
Abhay Salvi
Abhay Salvi

Reputation: 1119

cannot override Bootstrap theme

I have tried several ways to override the CSS of Bootstrap for this paragraph element P.fs-5.text-muted but except this, all the other CSS are easily changeable.

For example, this code works:

H1.display-4.fw-normal {
  font-size: 25px;
}

But I don't know why this code is not working:

P.fs-5.text-muted {
  color: #00f;
  font-size: 10px;
}

I've tried adding a custom.css file and linking it to the main HTML file after the bootstrap link but still got no results.

Here's the full code of the page:

<html lang="en">
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="description" content="" />
      <meta
         name="author"
         content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
         />
      <meta name="generator" content="Hugo 0.88.1" />
      <title>Pricing example · Bootstrap v5.1</title>
      <link
         href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
         rel="stylesheet"
         />
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
      <!-- Custom styles for this template -->
      <script src="new.js"></script>
      <style id="style">
         P.fs-5.text-muted {
         color: #00f;
         font-size: 10px;
         }
         H1.display-4.fw-normal {
         font-size: 25px;
         }
      </style>
   </head>
   <body
      data-new-gr-c-s-check-loaded="14.1044.0"
      data-gr-ext-installed=""
      style="overflow-x: hidden"
      >
      <div class="container py-3">
      <header>
         <div
            class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom"
            >
            <a
               href="/"
               class="d-flex align-items-center text-dark text-decoration-none"
               >
            <span class="fs-4">Pricing example</span>
            </a>
            <nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
               <a class="me-3 py-2 text-dark text-decoration-none" href="#"
                  >Features</a
                  >
               <a class="me-3 py-2 text-dark text-decoration-none" href="#"
                  >Enterprise</a
                  >
               <a class="me-3 py-2 text-dark text-decoration-none" href="#"
                  >Support</a
                  >
               <a class="py-2 text-dark text-decoration-none" href="#">Pricing</a>
            </nav>
         </div>
         <div class="pricing-header p-3 pb-md-4 mx-auto text-center">
            <h1 class="display-4 fw-normal">Pricing</h1>
            <p class="fs-5 text-muted">
               Quickly build an effective pricing table for your potential
               customers with this Bootstrap example. It’s built with default
               Bootstrap components and utilities with little customization.
            </p>
         </div>
      </header>
   </body>
</html>

Why the paragraph only is not updating???? I don't want to use Sass for this purpose. Any workaround for this?

Upvotes: 0

Views: 347

Answers (1)

saintyusuf
saintyusuf

Reputation: 504

You can use !important.

For example:

.class{
    font-size: 10px!important;
}

Upvotes: 1

Related Questions