Bootstrap

In this tutorial, we'll build a simple homepage using the framework - Bootstrap.
If you haven't tried all Bootstrap's stuff yet, don't worry;
You don't have to. Just begin. :D

Start Reading ;

Creating a simple homepage

Ready to see some magic? :D
We’re gonna build a homepage with just a few lines of CSS!
Before writing actual code, let’s have a look at the expected result.
Please click on the following link:

Simple Homepage - Bootstrap It !

There are 6 parts of the webpage and we’re gonna craft them one by one:

  1. Navigation bar
  2. Jumbotron
  3. Featured contents
  4. Testimonials
  5. Contact form
  6. Footer

Don’t forget to prepare the basic template. :D

HTML code:

Ok. Let’s begin.

1. The navigation bar

Navigation bar is a must-have component in any website. Sure, Bootstrap provides a pre-defined navbar which is responsive and ready-to-use. Just copy/paste the sample code into our homepage.

getbootstrap.com -> Documentation -> Components -> Navbar

HTML code:

Since we expect a dark design, let’s change some navbar’s helper classes. navbar-light should be changed to navbar-dark and bg-light should be changed to bg-dark.

HTML code:

For the navigation link block which is nested inside collapse, we don’t need a dropdown. So, just remove it and the disabled link.

HTML code:

Add some more navigation links.

HTML code:

Duplicate the navbar-nav block to replace the search form on the right side. We only need 3 social links for the second navbar-nav. Since the helper class mr-auto is not necessary for the second navbar-nav, just remove it.

HTML code:

And here is the final HTML snippet of our navigation bar.

HTML code:

Oh wait! We expected an absolute black background but Bootstrap’s pre-defined style is dark gray. Let’s fix it. We can override background-color of the class navbar or bg-dark. If we override the helper class bg-dark, we can re-use this helper class for the footer. :D

CSS code:

References:

2. The jumbotron

Besides navbar, jumbotron is also a common component which is often seen in homepage of many website. Let’s checkout the Bootstrap’s pre-defined Jumbotron and append the sample code right after our navigation bar.

getbootstrap.com -> Documentation -> Components -> Jumbotron

HTML code:

To achieve the expected result, we have to finish the following todo list:

  • Add a button (actually a link with visual style looks like a button)
  • Add background image using a helper class bg-trees
  • Add vertical paddings to the jumbotron using a helper class py-7
  • (Optional) Change the most outer <div> of the jumbotron to <header> for better semantic markup.

HTML code:

Does it work? No? :D
I’m sorry. That was my bad. I’ve not told you that Bootstrap doesn’t have the two helper classes: bg-trees and py-7. For padding utilities, Bootstrap only provides 5 levels of paddings: py-1 to py-5. And for background utilities, are only colors & gradients. We have to define those two classes on our own.

CSS code:

References:

This section is an example of Bootstrap’s grid implementation. We’re gonna make responsive layout which has 3 blocks. These blocks will display as 1 column on mobile devices and 3 columns on large screen devices. Let’s start with a blank <section> container and give it nice vertical paddings.

HTML code:

Copy/paste the sample code from Bootstrap’s grid document:
getbootstrap.com -> Documentation -> Layout -> Grid

HTML code:

Here we have some works need to be done:

  • Add a heading level 2 before the row container.
  • The 3-column layout may look well on tablet or larger screens. So, let’s change the breakpoint from col-sm to col-lg; And also add nice vertical paddings to each blocks.
  • Each block will contain a heading level 3, a short paragraph, and a Learn more button (actually a link with a visual look of a button).

HTML code:

Too easy? :D

4. Finish it yourself :D

I believe that you’ve found no difficulty crafting the next 2 sections and the footer. So, I’ll just leave here the final version of the source code:

HTML code: Click here to see final HTML code

CSS code: Click here to see final CSS code

Our Bootstrap crash series has been finished. Now you know how to Bootstrap a webpage. It’s time to move on.

Commonly, when somebody comes to this field (web development), it’s important to know that HTML and CSS are 2 of 3 must-learn languages. The third language is JavaScript which is considered as the next version of English. :D

Wanna learn to speak JavaScript? :D
Click here to join me learning JavaScript.