🧩 Website Layout

Positioning Elements on the Page

When building websites with HTML, we can position items on the screen using rows and columns. You can think of this like an Excel table:

• To place a logo in the top left of your website, you’d use the cell in the first row and first column on your table.
• To place a footer along the bottom of your website, you’d use the cells in every column on the bottom row.

However, using just plain tables can make this really difficult, and makes our websites look bad on mobile devices. To fix this, we can use a CSS package called Bootstrap.

Intro to Bootstrap

Bootstrap allows you to quickly and easily create rows and columns to help build the layout of your website.

It provides a system of rows, where each row is divided into 12 columns.

So, if you want a row to take up the entire width of the page, you’d say that row should have a column with a width of 12. If you wanted a row to only take up half the page, you’d say it needs to have a column with a width of 6. Let’s explore together with this example:

Grid mockup:

Website with borders on the grid:

Finished website: