cannot override Bootstrap theme
Question
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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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-cs-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?
1 answers
solution1
0 2022-01-14 16:34:56
You can use !important .
For example:
.class{
font-size: 10px!important;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.