Why Some Bootstrap Class and CSS property is not working in my code?

Question

Here I wanted to make a website template through BOOTSTRAP and CSS.But in my code some bootstrap class is not working like lead,font-weight,color,bg-color etc.If I use some bootstrap text-color in a section than when I use some other color in css in the same section ,I doesn't work. I want to use same font-family over every text.But if I use font family,than lead class doesn't work.In the same way,bootstrap font-weight-bold/bolder is working but light/lighter is not working not even in CSS,What can I do in this situation?

Here is my code:

HTML

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--ALL LINK-->
    <link rel="stylesheet" href="./bootstrap.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="shortcut icon" href="./img/ia_100000000.png" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
  
    <title>AppAmp Health Tracker Demo</title>
  </head>
  <body>

    <div class="section bg-light py-5">
  <div class="container">
    <div class="row">
      <div class="col h1">
        Our Team and History
      </div>
    </div>
    <div class="row py-5">
      <div class="col-xl-6 lead section1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis perspiciatis vero accusantium excepturi aperiam eius sit quis nobis cupiditate voluptatem tempora a odio, ad, officiis ex harum saepe fuga at modi quibusdam voluptas voluptatum!</div>
      <div class="col-xl-6 lead font-weight-lighter">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis perspiciatis vero accusantium excepturi aperiam eius sit quis nobis cupiditate voluptatem tempora a odio, ad, officiis ex harum saepe fuga at modi quibusdam voluptas voluptatum!</div>
    </div>
  </div>
</div>
  </body>
</html>

CSS

p,span,h1,h2,h3,h4,h5,a,blockquote,i,button,li,div{
    font-family: 'Work Sans', sans-serif;
}
.section1{
  font-weight:400;
}

umutcakir · Accepted Answer · 2021-04-04T15:16:44.903

If your font family does not support light or lighter font weights, it will not render light text. It is about font family. You should add supported font weights to link

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">

On the other hand, i tried the following text classes from bootstrap and it is working.

<div class="col-xl-6 lead section1 text-danger">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Debitis perspiciatis vero <span class="text-warning">accusantium</span> 
    excepturi aperiam eius sit quis nobis cupiditate voluptatem tempora a 
    odio, ad, officiis ex harum saepe fuga at modi quibusdam voluptas 
    voluptatum!
</div>

And it is a working pen: https://codepen.io/umutcakirbm/pen/KKaqwVp

EDIT:

Lead class has this properties

.lead {
    font-size: 1.25rem;
    font-weight: 300; // it will not work 
}

If you give extra font-weight-lighter/bolder/light etc. , it will override it because it has !important attribute.

And also text-* classes has !important attribute so you should add !important at your own css to override text class. Like this;

<span class="text-warning" style="color: #000 !important;">accusantium</span>

bootstrap text color woks but when i use a textcolor in css and some other color in bootstrap then boostrap color works but i want to give priority to css...and why lead class is not working?? — , Apr 04 '21 at 15:08

score 0 · Answer 2 · edited May 22 '22 at 04:13

I was working today to use custom CSS with Bootstrap and some of the CSS properties do work but some of them were not working correctly or Not Working. After juggling some time, I use !important at the end of the property in CSS, It Worked for me.

The !important rule in CSS is used to add more importance to a property/value than normal.

In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!

Wants to know more about !important? Click Here to See on W3School.

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Best Regards,
Ahmed Iqbal B.

Why Some Bootstrap Class and CSS property is not working in my code?

2 Answers2