Skip to content

A7 - Bootstrap Layouts

One of the biggest advantages of Bootstrap is that the pages it creates are responsive, meaning that they will be automatically be adapted to the user's screen size.

Resources

  • For in depth information, see this site
  • The specific classes we will be using are on yesterday's handout
  • The template files for this example will also help

As usual, you'll need to double click the update file to download the templates. There will be two HTML files this time.

Your Task

Part 1

The file a7a.html contains multi-column layouts of different types. Your should add two more:

  • Give each of them a different number of columns
  • Make one have equal column widths, and the other have unequal column widths. Remember, the width numbers for all columns in a row should always add to 12.
  • Each of them should collapse into rows at different thresholds (maybe one medium, one large for instance). In general, the more columns, the larger the screen size where they should be collapsed.

Part 2

Using what you've learned so far, create a home page for a fictional business. You can see a sample in the file a7b.html, which you may use as a starting point.

I'd like to see you do more than just change the text here. Could you add more sections? Rework how you might use columns? Try to get creative here!