/filebox_with_only_bootstrap

Primary LanguageHTML

Filebox with Only Bootstrap

In this project, we'll practice using Bootstrap.

Here is your target.

Setup

  1. Follow this guide to fork and clone this project.
  2. Extract and open the entire folder in Atom.
  3. Open landing.html in Chrome.
  4. Commit and Sync your work often as you go along, and once you are finished.

Suggested Steps

  1. I have already downloaded and included Bootstrap in the project for you.
  2. I have also included an additional_styles.css with some standard vertical spacer classes.
  3. There are <link>s to both in the <head> of your starting point, but they are commented out. Uncomment them to use them.
  4. Use Shoelace.io to create a skeleton grid for your layout, and then copy-paste it into your page.
  5. Plug in your content to each cell in your skeleton. You can copy-paste from the target if you want to.
  6. You should be able to exactly match the target by only applying existing classes from either bootstrap.css or additional_styles.css; you need not write any CSS rules yourself.

Resources: