Getting Started With Bootstrap

Suraj Nohar
7y
9
0
9

Article

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.

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.

(Source: https://goo.gl/7bUbhk)

Browser Compatibility
Bootstrap is compatible with all modern browsers, like Chrome, Firefox, Edge, Internet Explorer, Opera and Safari.
(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.

Step 2

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

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".

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.

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”.

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>.