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 image.


CSS Font families used:

  • Roboto

HTML Code:

<!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>
        <h1 class="text-dark">Bootstrap backgrounds and buttons</h1>
        <p class="bg-info text-white">Info paragraph</p>
        <p class="bg-warning text-dark">Warning paragraph</p>
        <button class="btn btn-primary text-white">Get Started</button>
        <button class="btn btn-secondary text-white">Get Started</button>
        <button class="btn btn-outline-success">Get Started</button>
        <button class="btn btn-outline-danger">Get Started</button>

    </div>
</body>

</html>

Related Posts

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…

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.