DEV Community

Randy Rivera
Randy Rivera

Posted on • Updated on

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Discussion (0)