CSS Reusability and Bootstrap class names | Coding Practice Test

CSS Reusability and Bootstrap class names

The goal of this coding practice test is to quickly get you off the ground with the Bootstrap class names and Reusability concepts.

Use the below reference image.


Instructions

Read these instructions carefully.

  • Apply the font family to the HTML main heading and paragraph elements with the same custom class name text.

Resources

CSS Font families used:

  • Caveat

Code:

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>

<body>
    <div class="bg-primary text-center">
        <h1 class="text text-white text-uppercase">happy Meals</h1>
        <p class="text text-light text-capitalize">discover the best foods</p>
    </div>
</body>

</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:[email protected];700&family=Lobster&family=Monoton&family=Open+Sans:ital,[email protected],400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,[email protected],400;0,700;1,700&family=Playfair+Display:ital,[email protected],400;0,700;1,700&family=Roboto:ital,[email protected],400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,[email protected],400;0,700;1,700&family=Work+Sans:ital,[email protected],400;0,700;1,700&display=swap");

.main-heading {
    font-family: Caveat;
}

.text {
    font-family: Caveat;

}

Related Posts

Bootstrap Backgrounds and Buttons | Coding Practice

Bootstrap Backgrounds and Buttons The goal of this coding practice is to quickly get you off the ground with Bootstrap Backgrounds and Buttons. Use the below reference…

Bootstrap Interview Questions and Answers | Part-1

Bootstrap Recently Asked Interview Questions and Answers 1. Explain what is Bootstrap and why it is used and its importance? Bootstrap is a large collection of predefined…

Leave a Reply

Your email address will not be published.