Hello Everyone,
Bootstrap is a free and open-source collection of tools for creating websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. It solves many problems which we had once, one of which is the cross-browser compatibility issue. Nowadays, the websites are perfect for all the browsers (IE, Firefox, and Chrome) and for all sizes of screens ( Desktop, Tablets, Phablets, and Phones). All thanks to Bootstrap developers -Mark Otto and Jacob Thornton of Twitter, though it was later declared to be an open-source project.
Reason to choose Bootstrap:
- Faster and Easier Web-Development.
- It creates Platform-independent web-pages.
- It creates Responsive Web-pages.
- It’s designed to be responsive to mobile devices too.
- It’s Free! Available on getbootstrap website.
Websites that were built with a lot of CSS and JavaScript can now be built with a few lines of code using Bootstrap. Bootstrap comprises of mainly three components:
- CSS
- Fonts
- Javascript
Installing Bootstrap: There are two ways in which we can install Bootstrap. I will talk about both ways of Installing Bootstrap. But before installing Bootstrap, we must code a basic html document on which we would install Bootstrap. Here it is,
Example:
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>Learning Bootstrap @ GeeksforGeeks.org</
title
>
<
meta
name
=
"description"
content
=
"Hello World"
>
</
head
>
<
body
>
<
div
> Hello World!</
div
>
<
div
> You're learning Bootstrap on Geeksforgeeks.org</
div
>
</
body
>
</
html
>
Method 1 (BootstrapCDN): This method of installing Bootstrap is fairly easy but it requires Internet connection. It is highly recommended that you follow this method.
-
Step 1: Goto getbootstrap wesite and click Getting Started . Scroll down.
-
Step 2: Copy the and paste it in the head section of the HTML code.
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>Learning Bootstrap @ GeeksforGeeks.org</
title
>
<
meta
name
=
"description"
content
=
"Hello World"
/>
<
link
rel
=
"stylesheet"
href
=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity
=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin
=
"anonymous"
/>
</
head
>
<
body
>
<
div
>Hello World!</
div
>
<
div
>You're learning Bootstrap on Geeksforgeeks.org</
div
>
<
script
src
=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity
=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity
=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity
=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin
=
"anonymous"
>
</
script
>
</
body
>
</
html
>
-
Step 3: Copy the
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>Learning Bootstrap @ GeeksforGeeks.org</
title
>
<
meta
name
=
"description"
content
=
"Hello World"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"css/bootstrap.min.css"
>
</
head
>
<
body
>
<
div
> Hello World!</
div
>
<
div
> You're learning Bootstrap on Geeksforgeeks.org</
div
>
<
script
src
=
"js/bootstrap.min.js"
> </
script
>
<
script
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"
>
</
script
>
</
body
>
</
html
>
- HTML 3: Open the HTML document with the browser and see the difference which bootstrap makes! This would probably not support higher versions of Internet Explorer(8+) and for them we need to download additional files which is cumbersome. So, It is highly recommended to follow Method A which is really very simple. This is just the installation and some basic knowledge on Bootstrap. We will be dealing with the other topics in the next part .
Keep Learning!