Building a wireframe into a Bootstrap page

Scenario:

You are preparing for responsive web site project, and need a refresher on using BootStrap.

You need to imagine a simple web page. This could be the subject you have chosen for the project coming up, or another. We won't be putting lots of contents in this exercise. You may use the responsive grid template to sketch out the layout at the break points.

Once you have wireframe coded into Bootstrap and working, you are done.

 

 

 

The exercise:

Some of us are really good at coding and may have plenty of Bootstrap experience; others are not comfortable with coding. That is why we want to keep this simple.

Check out your resources first.

Lynda.com has Bootstrap 3 Essential training with Ray Villalobos.

The Bootstrap home team getbootstrap.com has everything to get you started.

w3schools.com is good, there are lots of others.

You can use your favorite coding tools. Dreamweaver has the full Bootstrap installed so if you make a site, and create a new HTML/Bootstrap page it will load up all the support files.

The new page option defaults to a set of sample contents with most of the tricks you will need. Or, if you turn off the content check box, it gives an empty page.

The insert menu has most of the component tags in it, and a good set of Bootstrap components for carrousels, menus, etc.

Once you've tried out the controls, start building your layouts.

Bootstrap uses container, container-fluid, row, and 12 columns in four breakpoint varieties (xs, sm, md, lg).

Keep these nested in the right order and you'll be OK.

Build your Bootstrap test