How to install Bootstrap 4? Learn to download, install and create hello world program in Bootstrap 4
The first step towards learning Bootstrap 4 is to download, install in your project and start using it. In this section we will show you all these and finally create a simple Hello World Bootstrap 4 program. Bootstrap 4 is very powerful UI development framework as compare to previous Bootstrap 4. Bootstrap 4 comes with major changes, many new components are added and many others are removed. This version is designed to enable designers to design modern web applications.
In this section we are helping you in getting started with the Bootstrap 4. We will download it from the official website, extract the content and then make simple Hello World Bootstrap 4 program. This example also shows you various button types introduced in the Bootstrap 4.
Bootstrap 4 Distribution formats
Bootstrap 4 distribution is available in following formats and you can use any of them to meet your project requirements.
1. Bootstrap 4 CDN distribution:
The latest version of minified Bootstrap framework is available through CDN. This version is good if you are running your public application on Internet and include Bootstrap 4 from the CDN.
You can include following css in your HTML page in the <head>..</head> section:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
And include following before end of </body> tag in your webpage:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
This will include Bootstrap 4 through CDN method. You can check the latest version and then include required version in your page.
2. Bootstrap's source Sass:
This version is for developer and you can use the npm or bower to download and install the source version of Bootstrap 4. Here is the command to install using npm:
npm install bootstrap gem install bootstrap -v 4.1.3
3. Zip distribution of compile and minified Bootstrap 4
The compiled and minified version of Bootstrap 4 is available for download from its official website in zip format. This file contains css and js files in minified version. This distribution is available from its official website in zip format. You can download it, extract and then include in your project.
Visit the website: https://getbootstrap.com/ and here you will find the link to download zip format as shown below:
Click on the "Download" button to start the download. In my case it downloaded "bootstrap-4.1.3-dist.zip" file. Here you will always get the latest version of Bootstrap 4. Now unzip the file and you will get two directories:
- css - This directory contains css files of Bootstrap
- js - This directory contains js files.
These are the steps to download and extract Bootstrap 4 files. Now we will create Bootstrap "Hello World program".
Bootstrap 4 Hello World program
Now we will teach you to create your first application in Bootstrap 4, which will give you basic idea of creating UI using this framework. Our first example is Bootstrap 4 Hello world program which displays "Hello World" message on the screen as shown below:
Above example program displays "Hello World" message and various button types available in Bootstrap 4.
First of all create a file "bootstrap-4-hello-world-example.html" in any directory of your choice and add following code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" >
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
</div>
<!-- JavaScript -->
<script src="js/bootstrap.min.js" ></script>
</body>
</html>
In any Bootstrap application we have to define the viewport using following code:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
The viewport is very import here and it is the user's visible area of the web page. Here we have defined the viewport as the device-width, this means the view area will be the device screen size in which application is running. For example for mobile devices the viewport is small while for desktop is more (e.g. browser size). Bootstrap is mobile first framework and it automatically adjust the display of components according to the viewport or the display size.
Next we are including the css of Bootstrap using following code:
<link rel="stylesheet" href="css/bootstrap.min.css" >
Now under the body we are defining a container div under which our components will be laid down:
<div class="container">
Following code is used to display "Hello World" message and creating the various buttons available in Bootstrap 4:
<h1>Hello, world!</h1> <button type="button" class="btn">Basic</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-link">Link</button>
Finally we have to include following js files just above the end of body data (before </body>tag):
<!-- JavaScript --> <script src="js/bootstrap.min.js" ></script>
Above code includes the bootstrap js file into the web page.
Now we will copy the css and js directories from the Bootstrap download in the directory where you created the html file.
Finally run this in browser and you will see the output as shown above in the beginning of tutorial. 0
In this tutorial you download Bootstrap 4 and then created first Bootstrap 4 Hello World program.
Check Hello World example online.
Check more tutorials at: 1