Making a Website With Twitter Bootstrap

We’ve been making websites since we were kids and have found
that making your own website is one of the best parts of programming. These days many people pay services on Wix or Squarespace, but making your own website for free is always more satisfying and scalable. Unfortunately, web development has a lot of nitty and tedious aspects to it. So that’s why we like using Bootstrap; it enables us to get past some of the more difficult aspects of website programming like layout. We love using bootstrap and we love the instructables community so we figured that it would be a great idea to make a guide!

Be sure to check out our website and current project at :

http://doteverything.co/

Experience (Beginner – Intermediate)

1) Some knowledge of how html and CSS works – can be obtained with a quick online tutorial on codeacademy

What is Twitter’s Bootstrap?

In an internal hackathon held at Twitter, two Twitter employees made a responsive web layout tool that enabled people to get websites off the ground quickly that worked on multiple platforms. They built bootstrap. Today Bootstrap has become the de facto shortcut website toolkit. On top of quick tools to organize elements on a page, Bootstrap now has a suite of different css elements and javascript plugins that are ready to use with little programming!

Today we are going to be building the following website in Bootstrap. If you have any questions feel free to ask!

In order to start using Bootstrap, you need to first download it from this link:

http://getbootstrap.com/2.3.2/

Unzip the file and place in a new folder where you plan to build your website. We are using a web-text editor called Brackets, but any editor like sublime, etc works.

Create an Html file called instructable.html in the bootstrap folder.

(refer to image above)

To begin working with the bootstrap pathways you need to include the following three things:

A link to css/bootstrap.min.css in your tag. This basically enables all the css elements that range from basic buttons to positioning on the web page

A script inclusion at the top of your tag for http://code.jquery.com/jquery.js (this enables jquery on your web-page, which bootstrap utilizes)

A script inclusion at the top of your tag for js/bootstrap.min.js. This enables the javascript for bootstrap.

So let’s begin by laying out the basic structure of

Bootstrap layout. Bootstrap has a simple grid-structure of element layout that makes your website very responsive when changing screen sizes and moving to other devices.

Basically, Bootstrap breaks the page up into 12 columns. You can specify the positioning of elements on the page by specifying which columns your tag will take up. You specify the columns through a class declaration:

col-lg-#(for larger screens)

col-md-#(for medium size screens)

col-sm-#(for small screens)

col-xs-#(for even smaller screens)

Here’s a simple graphic from the bootstrap website to illustrate how this works: (refer above)

For the first row of .col-md-1, the code would look like this: (refer image 2)

We use col-md-# here because we want to scale for medium
sized screens. It’s important to note that you can add multiple scalings in one tag so that when the screen size changes, the tag gets scaled appropriately.

For example:

<div class = "col-md-4 col-lg-3 col-sm-12"></div>

Will take up 4 columns on a medium sized screen, but 3 on a larger one, and 12 columns (the entire width of the page) on a small screen.

Furthermore, you need to put columns in a row, as seen above. And you must put all rows in a

<div class = "container"></div>

The container class will be centered in the middle of the page. If you need a container that spans across the entire width of the page, you would use:

<div class = "container-fluid"></div>

For the first step in building our website, the top navbar

will be very important. Because we want to include a big background image, we want our navbar to be clear and just links to other pages. We also want it center-aligned. Unfortunately, we don’t get to use our fancy columns right of the gate because Bootstrap has a built in navbar feature.

Here’s the code for our Navbar: (image 1)

We use the container here to center it on our webpage, but there is still work to be done! We want to center the navbar even more so we add the following CSS: (image 2)

Basically, we make the text in the container aligned to the center. We also do some basic factoring to the .navbar so that it looks good. The important thing for alignment here is that for text-align: center to work, the .navbar needs to be defined in regards to width. So that’s why we make the display: inline-block.

This is what the final product of the navbar looks like: (image 3)

The next thing we are going to build is the background image and the main header: (image 1)

The code is a little complicated because we need to vertically align the “The World’s Best DIY Platform” header. Here’s the html: (image 2)

We pick a fluid container because we want the background to
span the entire site. As you can see, we place the .col in a div tag with a row class. We don’t want to include empty columns, so to position the header towards the right side of the screen, we just use “col-md-offset-5”, which just offsets our div 5 columns from the left. Here’s the css for the mainImage ID and the best ID:

(image 3, 4)

Now to vertically align an element inside a div, we have toresort to normal css: (image 5)

This is a relatively new concept in css, so i’m going to
link a better guide to explain how this works:

http://stackoverflow.com/questions/20547819/vertic...

The final aspect of the website will show you just how easy

Bootstrap is to use. We want to make this: (image 1)

All we have to do on the html end is use this code: (Image 2)

The cool thing here is that we make 2 rows, each holding different columns. These rows are in the same container and will appear on top of each other. I used font-awesome icons because they are easier to use than bootstrap’s native icons: http://fontawesome.io/?utm_source=hackernewslette...

The only css we need for this section is: (Image 3)

And just like that we have a fully functioning bootstrap
page! Remember, to have the true power of bootstrap, you need to include column declarations in more than just col-md-#.

If you have any questions or run into any problems, leave a comment and we will help you out! Once again, check out our website at doteverything.co and see further guides at doteverything.co/blog.html. See you till next time!