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>