Bootstrap Typography Fail 1 - No class attribute with appropriate values for uppercase and reverse not found

808 views Asked by At

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="/additional_files/js/webtechnology/bootstrap/bootstrap.min.js"></script>
        <script src="/additional_files/js/webtechnology/jquery/jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h2>THE <abbr title="North South East West">NEWS</abbr></h2>
            <p class="bg-success">This is an e-paper that collatesnational and world news</p>
            <div class="panel-group">
                <div class="panel panel-default">
                    <div class="panel-heading"><mark>National News</mark></div>
                    <div class="panel-body text-primary">This section displays all national news and events</div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading"><mark>World News</mark></div>
                    <div class="panel-body">This section displays all world news and events</div>
                </div>
            </div>
            <div>
            <p class="text-uppercase">copyright :- the news india company</p>
            <blockquote class="blockquote-reverse text-warning">Warning:- Do Not Reproduce</blockquote>
            </div>
        </div>
    </body>
</html>

This is the code which I wrote. When I run this code I can the output but on evaluation, it showing error. Fail 1 - No class attribute with appropriate values for uppercase and reverse not found

2

There are 2 answers

4
Rich DeBourke On

Your snippet doesn't reproduce the error you listed: No class attribute with appropriate values for uppercase and reverse not found, but one thing to fix is there's no closing quote mark after en:

<html lang="en> -> <html lang="en">

and one thing to modify is usually DOCTYPE is in uppercase (not required, but the norm):

<!Doctype html> -> <!DOCTYPE html>

Do your code would be like this:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
    <h2>THE <abbr title="North South East West">NEWS</abbr></h2>
    <p class="bg-success">This is an e-paper that collatesnational and world news</p>
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading"><mark>National News</mark></div>
            <div class="panel-body text-primary">This section displays all national news and events</div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading"><mark>World News</mark></div>
            <div class="panel-body">This section displays all world news and events</div>
        </div>
    </div>
    <div>
        <p class="text-uppercase">copyright :- the news india company</p>
        <blockquote class="blockquote-reverse text-warning">Warning:- Do Not Reproduce</blockquote>
    </div>
</div>

If you're still getting the error, you can edit your question to include the exact text for the error and where it's being seen (e.g. in the browser console?). One note - you're using Bootstrap 3, but you used the Bootstrap-4 tag. If need more help, you can update your tag.

0
Dnspy On

I was working on the same problem recently and finally got what they were expecting and here's the solution to our problem:

<div class="container">
  <h2>THE <abbr title="North South East West">NEWS</abbr></h2>
  <p class="bg-success">This is an e-paper that contains national and world news</p>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading"><mark>National News</mark></div>
      <div class="panel-body text-primary"><small>This section displays all national news and events</small></div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading"><mark>World News</mark></div>
      <div class="panel-body"><small>This section displays all world news and events</small></div>
    </div>
  </div>
</div>
<blockquote>
  <p class="text-uppercase">Copyright :- The news india company</p>
</blockquote>
<blockquote class="blockquote-reverse">
  <p class="text-warning">Warning:- Do Not Reproduce</p>
</blockquote>

We need to enclose last two paragraph tags with separate blockquote tags. Thanks.