CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
Rahul Kumar
Rahul Kumar

Reputation: 31

bg-faded effect on blockquote in bootstrap

I am trying to use "bg-faded" in section class="content" id="testtimonals" for faded background , But it is showing no effect on page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <title>Bootstrap</title>
</head>
<body>
  <div class="container">
  
    <section class="content" id="services">
      <h2 class="text-danger">Our Mission</h2>
      <p class="bg-danger text-white">Wisdom Pet Medicine strives to blend the best in traditional and alternative medicine in the diagnosis and treatment of companion animals including dogs, cats, birds, reptiles, rodents, and fish. We apply the wisdom garnered in the centuries old tradition of veterinary medicine, to find the safest treatments and cures.</p>
    
      <ul>
        <li><a href="#">Grooming</a></li>
        <li><a href="#">General Health</a></li>
        <li><a href="#">Nutrition</a></li>
        <li><a href="#">Pest Control</a></li>
        <li><a href="#">Vaccinations</a></li>
      </ul>
    
    </section>
    
    <section class="content" id="testimonials">
      <h2>Testimonials</h2>
    
      <blockquote class="blockquote bg-faded text-info">
        During the summer, our rabbit, Tonto, began to have severe redness and itching on his belly and feet. I'm very thankful to the veterinarians and staff at Wisdom for the excellent care Tonto received, and for nipping his allergies in the bud, so to speak.
        <div class="blockquote-footer">
          Jane
        </div>
      </blockquote>
    </section>
  
  </div><!-- content container -->
  
  <script src="js/jquery.slim.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

please, someone, tell me why it is not working

Upvotes: 1

Views: 1491

Answers (1)

Tommy
Tommy

Reputation: 2453

Short answer:

Replace .bg-faded by .bg-light and your code will work properly as shown in this fiddle.

Detailled answer:

.bg-faded is from the outdated alpha version of Bootstrap:

Outdated version of Bootstrap

Since I do not guess that you are using Bootstrap's alpha version, I refer you to the current v4.5 docs, in which .bg-faded was replaced by .bg-light:

Bootstrap v4.5

Upvotes: 2

Related Questions