Working with Bootstrap Part 2
Tags: programming, productivity, webdev, css
Published: 2021-12-17 16:04:44

* Continuing Forward!

###Create a Custom Heading

* Let's make a simple heading for our Cat Photo App by putting the title and relaxing cat image in the same row.

(link to challenge) => https://www.freecodecamp.org/learn/front-end-development-libraries/bootstrap/create-a-custom-heading

* Nest the first image and your `h2` element within a single `<div class="row">` element. Then nest the `h2` element within a `<div class="col-xs-8">` and your image in a `<div class="col-xs-4">` so that they are on the same line.

* Answer:
```html
  <div class="row">
    <div class="col-xs-8">
  <h2 class="text-primary text-center">CatPhotoApp</h2>
  </div>
<div class="col-xs-4">
  <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>
  </div>
  </div>
```


###Add Font Awesome Icons to our Buttons
* Font Awesome is a convenient library of icons. These icons can be webfonts or vector graphics. They're treated just like fonts.
* We can include it in any of our apps by adding the following code to the top of our HTML:

```
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
```
* We can also add the Front Awesome classes to the `i` element to turn it into an icon, for example:
```html
<i class="fas fa-thumbs-up"></i>
``` 

###Add Font Awesome Icons to all of our Buttons
* Let's Use Font Awesome to add an `info-circle` icon to our info button and a `trash` icons to your delete button.

* Code
```HTML
<div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i>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>
```

* Answer:

```html
<div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i> Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fas fa-info-circle"></i>Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fas fa-trash"></i>Delete</button>
    </div>
  </div>
```

###Responsively Style Radio Buttons
*We can use Bootstrap's `col-xs-*` classes on `form` elements, too! This way, our radio buttons will be evenly spread out across the page.
* Let's nest both of our radio buttons within a `<div class="row">` element. Then nest each of them within a `<div class="col-xs-6">` element.

* Code:

```html
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
```

* Answer:

```html
<div class="row">
    <div class="col-xs-6">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    </div>
    <div class="col-xs-6">
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
     </div>
    </div>
```

###Responsively Style Checkboxes
* Bootstrap's `col-xs-*` classes are fitting to all `form` elements, you can use them on your checkboxes too! 
* Let's nest all three of our checkboxes in a `<div class="row">` element. Then nest each of them in a `<div class="col-xs-4">` element.

```html
<div class="row">
  <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Loving</label>
  </div>
  <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Lazy</label>
  </div>
  <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Crazy</label>
    </div>
  </div>
```


### Style Text Inputs as Form Controls 
* We can add the `fa-paper-plane` Font Awesome icon by adding `<i class="fa fa-paper-plane"></i>` within our submit `button` element.
* Here FreeCodeCamp wants us to give our form's text input field a class of `form-control`. Also to give our submit button the classes `btn btn-primary`. Finally to give this button the Font Awesome icon of `fa-paper-plane`

* Answer:
```html
<input class="form-control" type="text" placeholder="cat photo URL" required>
    <button class="btn btn-primary" type="submit"><i class="fa fa-paper-plane"></i>Submit</button>
```

###Line up Form Elements Responsively with Bootstrap
* Here they just want us to align the form `input` and submission `button` on the same line. Just like we've previosuly had with the radio `buttons` and checkbox `buttons`.
* Nest the form's text `input` within a div with the class of `col-xs-7`. Nest your form's submit button in a div with the class `col-xs-5`.

* Answer:
```html
 <div class="row">
      <div class="col-xs-7">
    <input type="text" class="form-control" placeholder="cat photo URL" required>
    </div>
    <div class="col-xs-5">
    <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
    </div>
    </div>
```