Building a simple web page using bootstrap(for beginners)

6 min readOct 17, 2017

INTRODUCTION:

It is the dream of every beginner web designer to begin and finish his or her own first website, in a bid to achieve this within a short period of time, they are been tempted to download templates and edit them but even if their friends compliment them for a job well done they still don’t feel fulfilled deep down because they know the whole thing was not all about them.

What is bootstrap?

Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

Obviously the difficulty of creating a web page has been minimized on the arrival of bootstrap hence we can now create our first web page in just 45 minutes!!!

HOW TO GET STARTED

Visit http://getbootstrap.com/, click on download button to download your boot folder

After downloading your boot folder click on get started to understand how to use your bootstrap.

Bootstrap in your code

I’m very sure at some point we would be confused as to what the use of the folder is in your code, relax and let’s do this

Save your your boot folder in a folder which would be the main folder for your website
Open your IDE (integrated development environment) and include your opening and closing tags for html, head and body.
Create your link and script tags to include your bootstrap files in your code and in cases where you would be needing you own css and jacascript code, include them in your code link tags preferably in the head tags and script tags should be just before your closing body (</body>) tags as in the images below

the reason why it is best to put your script tags just before your closing body is because html loads from top to bottom and if the the java script code should load before your html code it could cause a few problems.Besides javascript codes takes a lot of time to load hence it would delay your web page.

With all we have done above we can now start building our website.

NOTE: Bootstrap is just to help you build your websites easily its not a substitute to you writing your html code and even your css code and here we won’t be using only bootstrap.

lets try build a simple website here:

The Navigation bar:

We all know what the navigation bar does it is the bar that contains the home, contact , about links etc. I’m very sure we can now remember what the navigation bar in case we forgot earlier.

In case you want to use bootstrap for your navigation you click on components and select navs and nav bar depending on your interest as shown below:

then you can copy and edit your code but since making nav bars is just as easy as copy and paste I would show us a simple nav-bar i made here.

that’s the simple html code I’m very sure we are very much familiar with that what just makes the difference between your nav bar and another is the way you style it using your css. Lets see the css code below:

and here we go…

The carousel:

Creating your own carousel without bootstrap would require a quite sound knowledge of javascript, jquery and some other libraries in javascript but the advent of bootstrap has made it very easy to do this all you have to do is copy and edit the code you get from the bootstrap official website.

and here we go…

so that’s how easy it is to put carousels on your web page without the slightest knowledge of javascript.

Dividing your web page

For beginners, who have issues with dividing a portion of your web page into three or more portions, it could be quite frustrating going about that. At times they resort to using tables, even though there are a couple of methods to go about that we would be considering purely bootstrap this time.

According to bootstrap, your web page is divided into 12 columns so however way you want to divide your web page will be calculated by you let’s assume you want to divide your web page into 3 portions you’ll have to give 4 columns to each division. The class required to do this is the class “row”.Assuming we want to see this from the father-child relationship perspective the class “row” will be the father while col-md-3 would be the child. The 3 is just an example it stands for the whatever value you want to put there. Before I bore you further with this explanation let’s check out some example codes