Despite trying multiple methods, I've found it challenging to override the CSS of Bootstrap specifically for this paragraph element P.fs-5.text-muted. Interestingly, all other CSS elements are easily modifiable.
Here's an example that works:
H1.display-4.fw-normal {
font-size: 25px;
}
However, I'm puzzled as to why this snippet doesn't work:
P.fs-5.text-muted {
color: #00f;
font-size: 10px;
}
I attempted adding a custom.css file and linking it to the main HTML file after the bootstrap link but unfortunately saw no changes.
Below is the complete 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad8d5d5cec9cec8dbcafa8f948b")))U}`}de'>[email protected]</a>/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25474a4a51565157445565100b140b16">[email protected]</a>/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 does the paragraph stubbornly refuse to update? Is there a workaround that doesn't involve using Sass?