Learning Bootstrap

 BOOTSTRAP DISCUSSION

Bootstrap is a very useful front-end framework for faster and easier web development. You won’t have to worry about having a decent user interface when you use it.

I personally love this framework because I’m not into designing web app user interfaces, it solves a pain in me. That is why I made this Bootstrap tutorial for beginners.

In fact, you can see my download and online tools sites. They are using Bootstrap.

We are using Bootstrap for web application tutorials as well. One example is our PHP, MySQL and OOP CRUD Tutorial – Step By Step Guide!

Here are some good looking websites or web apps built with the help of bootstrap: http://expo.getbootstrap.com

Just a little history, Bootstrap is created in twitter, it was called Twitter Bootstrap to streamline their development. Thanks to these people, the framework is still in active development.

1.0 Download or Include Bootstrap
2.0 Write Basic HTML Code
3.0 Include Bootstrap CSS
4.0 Include jQuery Library
5.0 Include Bootstrap JavaScript
6.0 Add IE8 support for HTML5 and media queries
7.0 Add a Navigation Bar
8.0 Add Page Content Container.
9.0 Add a Heading
10.0 Add a Table
11.0 Add a Form Inside a Table
12.0 Add a Bootstrap Button with Glyphicon
13.0 Add a Good Looking Message Box
14.0 Final Code and Live Demo
15.0 Online Resources
16.0 What’s Next?
17.0 Some Notes

If you follow and complete the tutorial, you will achieve the following output:

LIVE DEMO

The following sections will be your step by step guide to your first web development with Bootstrap.

There are two ways to use Bootstrap in a webpage.

The first way is to use a CDN or Content delivery network. Using bootstrap CDN means that we will not download and store the bootstrap files in our server or local machine. We will just include the bootstrap CSS and JavaScript links to our page.

The second way is downloading and storing a copy Bootstrap files in our web server or local machine. You can download bootstrap here.

I will show you how to use both in sections 3.0 to 5.0 below.

Our basic HTML code will have the following. We name our file index.html

It will be inside the ‘head’ tag and under ‘title’ tag.

If you want to use the Bootstrap CDN:

If you want to use your own copy of Bootstrap:

Make sure you downloaded bootstrap and put it in the same directory as your index.html, in my case, it is in the “bootstrap-3.3.6” folder.

Yes, we still have jQuery here. jQuery is necessary for Bootstrap’s JavaScript plugins.

If you want to learn more about jQuery, we have our useful jQuery Tutorial for Beginners here.

Include the jQuery library before the ending ‘body’ tag.

If you want to use the jQuery CDN:

If you want to use your own copy of jQuery:

Make sure you downloaded jQuery and put it in the same directory as your index.html, in my case, the jQuery filename is “jquery-3.0.0.min.js”.

Bootstrap has JavaScript source code for some reasons like animation and other functions for a better user experience.

If you want to use the Bootstrap CDN:

If you want to use your own copy of Bootstrap:

Bootstrap 3 is also a framework that is highly concerned with the mobile arena. It is responsive to different devices and screen sizes.