Working with Bootstrap Notes: Part 1

• We can also center our heading element to make it look way better, by just adding the class text-center to our h2 element.
• Remember to separate each of them with a space when adding several classes like this.

<h2 class="red-text text-center">your text</h2>

• Code:

<div class="container-fluid">
  <h2 class="red-text">CatPhotoApp</h2>

• Answer:

<h2 class= "text-center red-text">CatPhotoApp</h2>

Create A BootStrap Button

• Let's create a new button element below our kitten photo(below is a link to the creator of FreeCodeCamp to follow along). We're gonna give it the btn and btn-default classes as well as the text of like

• Code:
  

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
/* insert button here */

• Answer:

  <button class="btn btn-default">Like</button>

Create a Block Element Bootstrap Button

*Normally, your button elements with the btn and btn-default classes are only as wide as the text that they have.

• It would only be as wide as the word Submit. By Making them Block Elements with the additional class of btn-block, our button will stretch to fill the page's entire horizontal space and any elements following it flow onto a new line below the block, like so.

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

Taste the Bootstrap Color Rainbow

• The btn-primary class is the main color we'll be using in our app. It's useful for highlighting actions you want your user to take. By just replacing Bootstrap's btn-default class with btn-primary in our button.

<button class="btn btn-primary btn-block">Like</button>

Call out Optional Actions with btn-info

• The btn-info class is used to call attention to optional actions that the user can take. Let's create a new block-level Bootstrap button below the like button with the text info and add Bootstrap's btn-info and btn-block classes to it.

<button class="btn btn-info btn-block">Info</button>

Warn Your Users of a Dangerous Action with btn-danger

• The btn-danger class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo.

 <button class="btn btn-block btn-danger">Delete</button>

Use the Bootstrap Grid to Put Elements Side by Side

• Bootstrap uses a responsive 12-column grid system, which makes it easy to put elements into rows and specify each element's relative width.
• For Example Bootstrap's col-md-* class. md means medium, and * is a number specifying how many columns wide the element should be.
• We'll use col-xs-*, where xs means extra small(like an extra-small mobile phone) and * is the number of columns specifying how many columns wide the element should be.

<div class="row">
    <div class="col-xs-4">
  <button class="btn btn-block btn-primary">Like</button>
  </div>
  <div class="col-xs-4">
  <button class="btn btn-block btn-info">Info</button>
  </div>
  <div class="col-xs-4">
  <button class="btn btn-block btn-danger">Delete</button>
  </div>
  </div>

• We put Like, Info, and Delete buttons side-by-side by nesting all three of the, within one <div class="row"> element. Then each of them within a <div class="col-xs-4"> element.

Ditch Custom CSS for Bootstrap

• Here FreeCodeCamp just wants us to clean up our code and make our app look more conventional by using Bootstrap's built-in styles.
• In the current code

<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://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

• They want us to Delete the .red-text-. p, and smaller-image CSS declarations from your style element so that the only declarations left in your style element are h2 and thick-green-border. Then delete the p element that contains a dead link. Then remove the red-text class from your h2 element and replace it with the text-primary Bootstrap class.
• Finally!!! They want us to remove the smaller-image class from the first img element and replace it with the img-responsive
• Answer:

<style>
  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }
</style>

<div class="container-fluid">
  <h2 class="text-primary text-center">CatPhotoApp</h2>

  <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

Use a span to target Inline Elements

• We can also use spans to create inline elements. Remember when we used the btn-block class to make the button fill the entire row?
• Well with that being said by Using the inline span element. We can put several elements on the same line, and even style different parts of the same line differently.
• Let's do so by nesting the word love inside the p element that currently has the text things cats love. Give the span the class text-danger to make the text red.
• Code

<p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>

• Answer:

<p>Things cats <span class="text-danger">love:</span></p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>

Larson, Q., 2019. Frontend Development Libraries. [online] Freecodecamp.org. Available at: https://www.freecodecamp.org/learn/front-end-development-libraries/Bootstrap