Bootstrap 4 | Introduction

Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. 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.

Why Bootstrap?

  • Faster and Easier Web-Development.
  • It creates Platform-independent web-pages.
  • It creates Responsive Web-pages.
  • It designed to be responsive to mobile devices too.
  • It is Free! Available on www.getbootstrap.com

How to use Bootstrap 4 in webpage: There are two ways to include Bootstrap in the website.



  • Include Bootstrap from CDN link.
  • Download Bootstrap from getbootstrap.com and use it.

BootStrap 4 from CDN: This method of installing Bootstrap is easy. It is highly recommended to follow this method.

  • Goto www.getbootstrap.com and click Getting Started. Scroll down and copy the BootstrapCDN CSS, JS, Propper.js and jQuery links.
    // Bootstrap CSS library
    <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">
    
    // jQuery library
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity=
    "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
    crossorigin="anonymous"></script>
    
    // JS library
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
    crossorigin="anonymous"></script>
    
    // Latest compiled JavaScript library
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
    crossorigin="anonymous"></script>
  • Copy the linkes and paste it in the head section of the html code.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
      
<head>
    <title>Bootstrap Example</title>
  
    <meta charset="utf-8">
  
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
          
    <!-- Bootstrap CSS library -->
    <link rel="stylesheet" href=
    integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
    crossorigin="anonymous">
      
    <!-- jQuery library -->
    integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
      
    <!-- JS library -->
    <script src=
    integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
      
    <!-- Latest compiled JavaScript library -->
    <script src=
    integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
    </head>
<body>
  
<div class="container">
    <h1>GeeksforGeeks</h1>
    <p>A computer science portal for geeks</p
</div>
  
</body>
</html>                    

chevron_right


Output:

Download Bootstrap: This method of installing bootstrap is also easy but it can work offline ( doesn’t require an internet connection ) but it might not work for some browsers.

  • Goto www.getbootstrap.com and click Getting Started. Click on the Download Bootstrap button.
    bootstrap image
  • A.zip file would get downloaded. Extract it and go in the distribution folder. It contains two folders named as CSS and JS.
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    
    <script src="js/bootstrap.min.js"> </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>
  • Add the file link to the HTML document and then open the web page using web browsers.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
      
<head>
    <title>Bootstrap Example</title>
    
    <meta charset="utf-8">
    
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
      
    <link rel="stylesheet" type="text/css" 
            href="css/bootstrap.min.css">
  
    <script src="js/bootstrap.min.js"></script>
</head>
  
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <p>A computer science portal for geeks</p
    </div>
</body>
  
</html>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.