Getting started with Bootstrap Structuring
Tags: Web, Website, Web Development, Design, Bootstrap

Getting started with Bootstrap Structuring

If you’ve been building static websites for a while, it’s likely you would’ve come across Bootstrap.

Bootstrap is a CSS Library that is very useful to give basic styling to your website while making it responsive and mobile friendly very easily.

It is developed and maintained by Twitter, and is also known as Twitter Bootstrap.

There are 2 aspects of Bootstrap, which are-

Structuring Styling

In this post, we’ll go over the basics of Structuring.

Setup

First, let’s set up a basic project.

Now, let’s head over to getbootstrap.com.

You can either download all their styles, or use their CDN. It’s recommended to use the CDN for better performance.

To find the CDN, scroll till you see the HTML.

Copy both those lines and add them to the <head> of your HTML.

And that’s it! Now, you have Bootstrap! So let’s start using it.

Structuring

Bootstrap uses a 12 column grid system to arrange contents on your page. This means that on any platform, your screen’s total width is divided into 12 columns.

You can decide how many columns a certain element to take up and which elements are on the same row.

Understanding the Bootstrap Grid System

To begin understanding the grid system, let’s try to understand the following structure.

Here, we see 8 rows, each row consisting of a number of divs.

The first row contains 12 divs, each div taking up a width of 1 column.

The second row contains 6 divs, each taking up a width of 2 columns.

The third row contains 4 divs, each taking up a width of 3 columns.

If you’re starting to see the logic here, you’re starting to understand how the grid system works.

Let’s try to construct the first 5 rows.

A general good practice is to include all elements of your web page inside a container div. This adds a margin between the edge of the screen and your content.

So let’s make a div with class=”container”.

To see how this container works, let’s add some text inside and outside the container.

As you can see, the text inside the container has a margin from the edge of the screen. This improves the overall appearance of the website.

So from here on, let’s put all our divs inside the container.

Next, to demarcate each row, we will use divs with class=”row”. Since we wanted to make the first 5 rows, let’s make 5 divs with class=”row”.

Each row is made up of 12 columns.

So to make the first row, we need 12 divs of width 1 column. We can do this by using 12 divs of class=”col-1”.

This gives the following result.

To understand the output better, let’s give each column some styling.

Tip: Try adding the styles one at a time and see the output.

Now, let’s import this stylesheet into our page.

Note: Make sure to import your custom stylesheets after the bootstrap styles, so that your styles override the Bootstrap styles.

And now, our page structure looks like this.

So we’ve completed the first row. For the second row, we need 6 divs each of 2 column width.

And now we have,

I guess you’d have started to get the hang of how this works. Try to complete the next 3 rows by yourself, before you see my solution.

And you should have this.

You now know how Bootstrap Structuring and the Grid System work.