Getting Started with Bootstrap and Pexels – Part 1

Overview

In this article we are going to cover Bootstrap and Pexels basics and build a single page website.

Bootstrap Basics

We are going to use Bootstrap to create the layout of our website. There is an important formatting theme to cover before we start. When using the grid system the width of our page can be divided, into twelve areas. The “width” of our page or our “div” can be broken up using a combination of numbers that equal twelve. A quick example: if we want three columns we would set the columns to four each this would divide our max number of twelve into three equal parts. This allows us to have two equal columns and a smaller column, for an image.

Another example is we could set one column to 2 and the other two to 5, this would give a small area for an image, and then two for text areas. This is a quick way to setup a simple article or monthly newsletter. The image can be a logo or the topic of the article, then the other two columns are the text of the article. We can just have this one row and columns or we can format more rows and make our columns what number they need to be.

Color Themes in Bootstrap

Color themes are simple and easy to set in Bootstrap, when you create an object in Bootstrap you can add a class in the tag of the “div“, and style the “div“. When styling a “div“, “bg” is the background of our “div” and “text” is the text of our “div“. There are two basic colors: dark and light. One is a black theme and the other is a white theme. We can use a style tag in our class and use any color possible though.

One thing we should remember is that to use the grid we have to wrap our rows and columns in a “div“. We can use container if we are building columns that are not going to completely span the width of our page. We can also use container-fluid if we want our columns to span the entire width of our page.

Pexels Basics

Pexels is a place to find free to use high definition photos. When downloaded, you can choose from different sizes which make our photos easier to edit for our website. This is what we will use in our examples, for practice grab a few images and save them to your folder.

Getting Started

To get started we just grab our CDN from Bootstrap:

What Is Bootstrap

Bootstrap is a framework that allows us to create websites faster and more effectively. It also allows for quicker and easier layout and styling of websites, less CSS essentially.

Even Columns

To create a row with three columns that have equal width we would set our code up like this:

It will create a website like this with extra code:

Two Rows

To create a web-page with two rows that looked like this:

We would use this code:

It would look like this after we add the images and text:

The code would just be this:

Basic Layout and Beyond

Now, we have our basic layout, after we get this we just add our Jumbo-Tron code which is pretty simple:

Intermediate Layout

If we wanted to have a column take up the entire length of the page, and have two rows with two columns on the rows :

We would have our code:

The key to this is where our “divs” are. What we created with this code is a row that has a column with a “width” of 4 and another column with 8 as the “width“. Then in our column that was set to 8 we create two more rows.

Notice we set the first row to 12. The reason this works is 12 is the width of what ever we have our row inside, so if we had it in a fluid container it would equal the “width” of the web page. Since we have it inside of a “div” that is nested in our column set to 8, it just takes up the “width” of that container. Our 12 in this case is equal to eight, it is 12(100%) of 8(75%) of our web page.

Then to get our second sub row we set both columns to 6(50%) of 8(75%)of our web page.

Now we can add images and text:

and our website looks like this:
Thanks for checking out the first Bootstrap article. In the next article will cover more Bootstrap formatting and how to use padding without CSS.

Related Posts