BootStrap (Part-1) | Introduction and Installation

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!