Getting Started With Bootstrap

1
 
What is Bootstrap?
  • Bootstrap is a kind of free front-end framework with the help of which, developers can develop websites more quickly and easily.
  • Bootstrap provides privileges for developers to use HTML and CSS-based design templates to create typography, buttons, forms, tables, modals, image console, navigation and many others, also some optional JavaScript plugins.
  • Bootstrap allows developers to create responsive web designs.
Let us have a quick view of what responsive web design is. 
 
Responsive Web Design

Responsive web design is about creating a website in such a manner that it will automatically adjust itself according to the screen size in the user’s device, platforms, and orientation.

Now, let me show you an example
 
2 
 
After resizing this page, the below view will appear.

3 
 
History of Bootstrap

Bootstrap was originally developed for Twitter by Mark Otto and Jacob Thornton. In the early days, Bootstrap was called Twitter Blueprint and was used as a framework to encourage consistency across internal tools. In August 2011, Bootstrap was released as an open source product on GitHub.

(Source: https://goo.gl/4eQoVf

Advantages of Bootstrap
  • Easy to Use
    Anyone can use Bootstrap for making web pages by just having a little knowledge about HTML and CSS.

  • Responsive feature
    Bootstrap has a special feature, called responsive, which helps developers to make a web page in such a manner that CSS view will automatically adjust to phones, tablets, and desktops.
    4 
    (Source: https://goo.gl/7bUbhk)
  • Browser Compatibility
    Bootstrap is compatible with all modern browsers, like Chrome, Firefox, Edge, Internet Explorer, Opera and Safari.5 
    (Source: https://goo.gl/dJHUzf)
  • Open Source
    Bootstrap is completely free for anyone to download and use it.

  • Time Saving
    Anyone can use predefined Bootstrap templates which save time and reduce human effort.
Where to Get Bootstrap?

There are two ways to use Bootstrap -
  • Download Bootstrap via getbootstrap.com
  • Include Bootstrap from a CDN (Content Delivery Network)
Downloading Bootstrap

Anyone can download Bootstrap by following the below steps.
 
Step 1

First, open getbootstrap.com in your browser.
 
6 
 
Step 2

Once this webpage is loaded, click on "Download Bootstrap" button, as shown below.

7

Step 3

Once you click on this, you will get three options there i.e. Download Bootstrap, Download Source, and Download Sass. Now, click on "Download Bootstrap".

8 

Download Source

By clicking on this option, user can download latest Bootstrap HTML and JavaScript source codes. Now, further, let us have a quick view on another way to get Bootstrap below.

Bootstrap CDN

If you do not want to download Bootstrap, then you can also use CDN (Content Delivery Network). MaxCDN provides CDN support to Bootstrap's JavaScript, CSS. and jQuery. Below are the latest Bootstrap CDN links.

9
 
Advantage of using Bootstrap CDN

CDN provides a faster loading time as once a user requests a file from it, it will be served from the Server closest to them.

Create a Web Page with Bootstrap

Let us make our first webpage with Bootstrap and start with “Hello World” display in our browser.
 
Step 1

First, we will open any code editor platform and create a new HTML file and save this file name with “hello.html”. Here, I have used “Sublime Text 3”.

10
 
Mobile First

Bootstrap 3 has designed it to be responsive to mobile devices. To ensure the proper vision, we have to add the following <meta> tag inside <head>.

11

Now, code for "Hello World" html page will be like the following.
 
12 
 
Output
 
13 
 
Example with MaxCDN

14 
 
This is a basic example of Bootstrap with MaxCDN. We used CSS, jQuery, and JavaScript libraries.
 
Output

Below output will come on the big screen.
 
 
Once you resize the browser or open webpage in small screens, the below output will come on screen.
 
16 
 
In this article, we learned the basic of Bootstrap. In the next article, we will shift our focus towards Bootstraps Grids.
 
Hope, you enjoy this article. Stay tuned for next article.