Bootstrap 4 | Introduction

28 Apr, 2022
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 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.
Why Bootstrap? 
Faster and Easier Web Development.
It creates Platform-independent web pages.
It creates Responsive Web-pages.
It is designed to be responsive to mobile devices too.
It is Free! Available on www.getbootstrap.com
How to use Bootstrap 4 on a webpage: There are two ways to include Bootstrap on the website. 
Include Bootstrap from the 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. 
Go to www.getbootstrap.com and click Getting Started. Scroll down and copy the Bootstrap CDN for CSS, JS, Popper.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>
The 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 links and paste them into the head section of the HTML code.
Example: 
HTML
<!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="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></head><body>    <div class="container">        <h1>GeeksforGeeks</h1>         <p>A computer science portal for geeks</p>     </div></body></html>
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. 
Go to www.getbootstrap.com and click Getting Started. Click on the Download Bootstrap button.
A.zip file would get downloaded. Extract it and go into the distribution folder. It contains two folders named 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:  
HTML
<!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>
Output: 
ghoshsuman0129
tanwarsinghvaibhav
rkbhola5
sahilintern
Bootstrap-4
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
How to Show Images on Click using HTML ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?