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
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 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.
Output
Example with MaxCDN
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.
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.