Working with Bootstrap Notes: Part 1
Tags: javascript, beginners, programming, css
Published: 2021-12-10 15:35:35

* 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.
```html
<h2 class="red-text text-center">your text</h2>
```
* Code:
```html

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

```

* Answer:
```html
<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:
```html
<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:
```html
  <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.
```html
<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.
```html
<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.
```html
<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.
```html
 <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.
```html
<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
```html
<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:
```html
<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
```html
<p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
```
* Answer:
```html
<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