Solve problem "Create a Block Element Bootstrap Button" online - Learn Python 3

Lesson: Responsive Design with Bootstrap

Create a Block Element Bootstrap Button

Normally, your button elements with a class of btn are only as wide as the text that they contain. For example:

<button class="btn">Submit</button>

This button would only be as wide as the word "Submit".

By making them block elements with the additional class of btn-block, your button will stretch to fill your page's entire horizontal space and any elements following it will flow onto a "new line" below the block.

<button class="btn btn-block">Submit</button>

This button would take up 100% of the available width.

Note that these buttons still need the btn class.

Add Bootstrap's btn-block class to your Bootstrap button.

Your button should still have the class btn.

Your button should have the class btn-block.

Make sure all your button elements have a closing tag.

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }
  h2 {
    font-family: Lobster, Monospace;
  }
  p {
    font-size: 16px;
    font-family: Monospace;
  }
  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }
  .smaller-image {
    width: 100px;
  }
</style>
<div class="container-fluid">
  <h2 class="red-text text-center">CatPhotoApp</h2>
  <p>Click here for <a href="#">cat photos</a>.</p>
  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. ">
  <button class="btn">Like</button>
  <p>Things cats love:</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX