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.
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.
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.
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.
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.
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.
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.
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.
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
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
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.
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.
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
- 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.
- 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 featuredColumns. This is used to centre the content within the div.
The next is featuredImage. This 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.
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.
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.
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
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.
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.
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.
The final section is the 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.
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.
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.