Working with Bootstrap Part 2

• 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:
  

  <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:

<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
  

<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:

<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:
  

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

• Answer:

<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.

<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:
  

<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:
  

 <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>