Bootstrap I

Bootstrap provides a layout grid system, components and much more but it's up to us how we should use them. To get better at using bootstrap, you need to build projects that utilize the grid and incorporate components.

Project 1 - Build a digital resume

Whenever you are introduced to new technology it's good to use something your familiar with against something new. All of you should be familiar with your own resumes. Lets introduce your resume to a new concept: bootstrap. By the end of this project, you will have a single page version of your resume that is fully responsive. You could use this resume in many instances in your future, so make it count!

Prerequisites

1. LESS preprocessing is needed so make sure you understand how to use your compiler.

Task - Build Your Digital Resume

• Review the example resume as a way to get ideas for your own resume. The example is there to give you a guideline, please avoid copying it as it would just cheat you of the experience of making your own.

• Your responsive layout must follow the grid system pattern shown here:

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <!-- some content here -->
        </div>
    </div>
     <div class="row">
        <div class="col-sm-12">
            <!-- some content here -->
        </div>
    </div>
    etc...
</div>

• You must use at least 4 of the following components listed here:

  • Jumbotron
  • List Group
  • Badge
  • Buttons
  • Button group
  • Card
  • Nav

• Incorporate a responsive image of yourself somewhere on the site. (See example for ideas)

• Introduce a table somewhere in your site that would be relevent to a resume. (See example for ideas)

Stretch Task - Implement a JavaScript-based component in your site