Store Website with Bootstrap

Design First

First, use a drawing program (Keynote is actually a favorite of web designers) to mock up your website.  Use a 12 column design, so that you can use Bootstrap later to turn your design into reality.

Set up your Bootstrap Website.

Make a regular website, with head and body tags.  Put these lines in the <head>.  You can copy and paste them from the Bootstrap website.  Look for the section on that page called “Bootstrap CDN”.

What these lines do is to copy the CSS and Javascript your website needs from remote servers.  You can download and include the bootstrap files on your own server, but this is an easier way to get started.

Make your container, row, and column divs.

The next step is to make the structure of your website with rows and columns.  The whole thing should be inside a container div, like this:

Inside the container div, make as many rows as you need.  I’ll make three rows, but you might have more.

Each row should be broken up into columns. Here is where the 12-column model comes in.  In each row, the number of columns should add up to 12.  Say my first row has just one box, the whole way across.  Then that row might look like this:

The “md” stands for medium, which doesn’t mean anything here, but will when we have more boxes.

Our next row has two boxes, one which is twice as wide as the other.  That row would look like this:

Try making the third box into 6 2-column boxes.

Fill in the content.

Use more divs of your own inside the column divs to add content, if you want to style content with classes.

Use Bootstrap Components