htmlpropertiesfont-familybootstrap-5lead

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

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;
}
Solution

  • 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>