In this post we’re going to build a simple website that will help us take a look at some of the commonly used features and components of Bootstrap. Check the images below to see the site we’ll be building.

boot-1

boot-2

boot-3

Bootstrap is nothing but readymade CSS that we can directly use in our website. This is mostly done by adding the appropriate classes to the different sections of the page. Currently the Alpha version of Bootstrap 4 is already out and if you’re interested in that, you can check out this free youtube course – Bootstrap 4 Tutorial (https://www.youtube.com/watch?v=69nEzHLy_tM). But for our lesson, we’ll be using Bootstrap 3.

In case you’re coming directly to this post, please check my previous post – Setting Up With Bootstrap to see how to set up an HTML Page and link the Bootstrap CSS to it. Once you’re done with that, let’s get to this one. 

Bootstrap in One Page

I’m going to build a simple one-page website that has all the commonly used Bootstrap components so you can get a good idea about how to use them in a website and quickly set up bootstrap. Check out this page to see what we’ll be building – divinityintech.com/bootstrap-page. It’s a simple page but uses all components we need. You can go ahead and download the course files from here.

If you followed the previous post or at least downloaded the course files from the previous post, you’d have a working folder in which you have two folders – css & javascript and one index.html file. For this post we are going to follow an example page from the official Bootstrap website – http://getbootstrap.com/examples/navbar-static-top/. Go to that page, right click and go to the view page source, copy all the text and paste it into your index.html file. Make sure that the css and javascript links are pointing to the correct file (check the previous post for how this can be done or ask me). If you did that and open your index.html file in Chrome, it should look exactly like http://getbootstrap.com/examples/navbar-static-top/. We will slowly modify each section. To check how this works in a real website you’ll need to have access to a Domain and Hosting. we’ll look at this in a future post.

For this website we need to create a custom CSS file to add in our own CSS styles. So create a new file called user.css and save it in the css folder. Now you need to go to your index.html and add the below line in it. Always add your custom CSS after the bootstrap CSS. This is very important.

Bootstrap-link

Navigation Bar

The Navbar appears at the top of the page. This is something that is commonly used in many websites. The Bootstrap Navbar allows you to have many tabs and a dropdown menu if you want. There are many options available in bootstrap for how the navbar should look and function. I’m going to add one Bootstrap class navbar-inverse that will give us a dark navbar.  I’m also going to create an additional class to the nav section called navUser. For all custom classes we will use two words, the first word starting with a small letter and the next one with a capital letter. This is to make sure there is no confusion between our classes and Bootstraps pre-defined classes.

Bootstrap - Navbar

In your user.css select the new class you created – navUser and add in the property margin-bottom and set it to 0.

This is because, unlike the example page I don’t want a gap between the navbar and the next section.

I also want the font to change into #B32500 when we hover over the navbar. So I’m going to select the Bootstrap ID navbar and set its color to #B32500 when we hover over it.

Bootstrap - Navbar CSS

Our work with the navbar is done.

The Hero Section

The next section is going to be an image that covers the entire screen and we’ll have some text in it. This is a commonly used style in many websites these days. You can delete the entire jumbotron section from your page. Replace it with this code.

Bootstrap - Hero Section

The first div has a user created class – jumboContainer. This is the class we are going to use to add the background. Select the jumboContainer class and add the below properties to it.

Bootstrap Jumbo Container CSS

At this point we have to create another folder called images where we can save all the images that we will use. You can download all the images I’ve used from the courses file. If you see the way the url is selected, we start with ../ this is to go back one folder from our css folder and then select the images folder. This can be a bit confusing when building big websites, so make sure to pay attention to the way the folders are arranged. Our folder should now look like this.

folders

The background image I’ve used is from unsplash.com a website from where you can get some really cool photos to use freely in your websites. I’ve used the below photo

https://unsplash.com/photos/80mMZb57oJI

I’ve downloaded and saved it into the images folder and renamed it bridge.jpeg

Using the value 100vh for the height makes the image cover the entire page.

Next the following properties should be changed

Bootstrap Hyperlink CSS

This is to have #B32500 for all hyperlink text. When hovered over, it should change to #D4383A. Hyperlinks are underlined when hovered over by default. To remove this I’ve changed the value of text-decoration to none.

Grid System

One of the best features about bootstrap is their grid system. This helps us to easily divide the page into many columns and also adjust the number of columns based on the size of the screen or if it’s viewed on a mobile phone. 

In this page we are going to use a three grid system. With each grid having a header, an image, some random text and a button. Below is the entire code. You can check out this example page for some reference – http://getbootstrap.com/examples/justified-nav/. I’ll explain the important bootstrap classes. 

Bootstrap - Featured Columns

container —> This has been used before also, this is used to limit the total width of the content. This varies depending on the size of the device the page is viewed on.

row —> standard bootstrap class that must be added before using grids.

The important information about the grid lies in the next class used. Bootstrap has four types to assess which device you’re viewing from

xs – extra small (most mobile phones)

sm – small screen – maybe a tablet

md – normal screen

lg – large screen

The screen is virtually divided into 12 columns. So depending on how many columns you want your div to cover, you need to set your class. Below are some examples of how it can be used.

col-sm-2 —> This will cover 2 columns in a small screen.

col-md-4 —> This will cover 4 columns in a medium sized screen

col-lg-6 —> This will cover half the page.

cos-xs-12 —> This will stretch to the entire section.

To get a complete understanding of this refer to bootstrap’s grid system page http://getbootstrap.com/css/#grid

There are two things to remember here

  1. If a rule is applied to a specific screen size, it is automatically applied to any screen bigger than that unless specifically mentioned otherwise. If we use col-sm-4 this means, that div will be the size of four columns in small, medium and large screens.
  2. Any screen smaller than the rule will default to 12 columns. So if you set col-md-6, this means that in small and extra small devices the div will cover 12 columns.

For this website I’ve made a three grid page. I’ve used col-sm-4 for the three sections. So on small, medium and large devices we will have three grids and on screens smaller than this, the grids will be stacked one below another.

I’ve used some custom css. The first one is featuredColumnsThis is used to centre the content within the div.

The next is featuredImageThis includes two properties. The padding is to give some padding around the image. The margin-left and margin-right is to ensure that the images appear in the centre of the div in extra small screens. You can try deleting this and checking how they appear to get an idea of what I mean.

Bootstrap Featured Columns CSS

There are also two bootstrap classes that I’ve used for the images.

img-responsive – This makes the image responsive when viewed on different screens.

img-circle – This makes the image into a circle.

Below each section is a button. Bootstrap provides buttons that can be easily used.

Bootstrap Button

The simplest way is to add an <a> tag (it can also be a <p> tag) and include the class btn. The additional class btn-success is for the green button. Bootstrap offers some predefined button colors. You can of course over-ride it to any colour you want using custom CSS.

Lists

The next section is a list of courses or lessons I recommend to learn web development. This section does not really contain any specific bootstrap classes except for the container which I’ve pretty much used in all sections.

The background image I’ve used is again from unsplash – https://unsplash.com/photos/jtyIeXi1Goc

Bootstrap - Lists

The container is wrapped in a div with the class listBack that has the background image

The list itself includes a customer CSS listStyle that I’ve modified to give some custom styling to the list.

Bootstrap List CSS

Forms

The next section contains forms. Neat looking forms are something that can be easily done using Bootstrap. There are many types of forms available in Bootstrap. You can refer to http://getbootstrap.com/css/#forms for a comprehensive idea about forms. I’ve used a basic form from the bootstrap template.

Bootstrap Forms

The form doesn’t look that great if it covers the entire div in a PC or laptop screen so I’ve placed the form inside a div with the classes col-sm-6. This class makes the form appear only for half the screen except for extra small screens.

There is no custom CSS required for this section.

Footer

The final section is the footer.

Bootstrap Footer

I’ve used custom CSS using the class bottomFooter. It sets a fixed height to the footer, adds a background color and font color.

There is another custom class footerRight that is used to align the text in one section of the footer to the right side.

Finally we add in some minor modification for aesthetics.

Bootstrap Footer CSS

If you followed the steps exactly, your website should look like http://divinityintech.com/bootstrap-page/

I hope you had fun building this website. It is a simple website but if you can build this, then I’m sure you’ll be able to use the concepts and techniques from this to build more complex pages using other components in bootstrap.

You can always contact me using the comments section to ask any questions or queries you might have. I’ll be more than willing to help. One great way to know more about how many users you have on your site is by using Google Analytics.

Recommended Resources

Check out these two courses in Udemy that really helped me learn Web Development and WordPress.

The Complete Web Developer by Rob Percival – This is an excellent resource to learn Web Development. Anyone, even with minimal knowledge about HTML/CSS can take this course to learn to make real world websites.

WordPress Theme Development with Bootstrap by Brad Hussey – This is also a very good course to learn to make WordPress themes. You will be building a bootstrap page and then creating a wordpress theme based on the website you created.