Bootstrap 4 - Environment Setup

You can start using Bootstrap 4 in your website by including it from CDN(Content Delivery Network) or downloading from getbootstrap.com.

Using CDN

The Bootstrap 4 can be used in the website by including it from Content Delivery Network.

Use the below compiled Bootstrap's CDN of CSS and JS in your project.

<!-- Compiled and Minified Bootstrap CSS -->
<link rel = "stylesheet" 
   href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
   integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin = "anonymous">

<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
   integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
   crossorigin = "anonymous">
</script>

<!-- Popper -->
<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>

<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
   integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
   crossorigin = "anonymous">
</script>

Include the CDN versions of jQuery and Popper.js (Bootstrap 4 uses jQuery and Popper.js to make use of JavaScript components such as modals, tooltips, popovers etc) before the minified Bootstrap JavaScript, if you are using the compiled version of JavaScript.

Following are some components, which require jQuery −

  • Used for closable alerts

  • Toggle the states by using buttons and checkboxes/radio buttons and collapse for toggling content

  • Carousel for slides, controls, and indicators

  • Dropdowns (uses the Popper.js for perfect positioning)

  • Open and close the Modals

  • For collapsing the Navbar

  • Tooltips and popovers (uses the Popper.js for perfect positioning)

Downloading Bootstrap 4

You can download the Bootstrap 4 from https://getbootstrap.com/docs/4.1/getting-started/download/. When you click on this link, you will get to see a screen as shown below −

Bootstrap 4 Download Screen

Here you can see two buttons −

  • Download − Clicking this, you can download the precompiled and minified versions of Bootstrap's CSS and JavaScript. No documentation or original source code files are included.

  • Download Source − Clicking this, you can get the latest Bootstrap SCSS, JavaScript source code and documentation files.

For better understanding and ease of use, we shall use precompiled version of Bootstrap throughout the tutorial. As the files are complied and minified, you don't have to bother every time including separate files for individual functionality.

File Structure

Precompiled Bootstrap 4

Once the compiled version Bootstrap 4 is downloaded, extract the ZIP file, and you will see the following file/directory structure −

Precompiled Bootstrap 4

As you can see, there are compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*).

Bootstrap 4 Source Code

If you have downloaded the Bootstrap 4 source code, then the file structure would be as follows −

Bootstrap 4 Source Code

  • The files under js/ and scss/ are the source code for Bootstrap CSS and JavaScript.

  • The dist/ folder include everything listed in the precompiled download section above.

  • The docs/examples/, includes source code for Bootstrap documentation and examples of Bootstrap usage.

Creating First Web Page with Bootstrap 4

The below example specifies simple web page of Bootstrap 4 −

Example

Live Demo 
<html lang = "en">
   <head>
      <!-- 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 = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <h2>Hello, world!!! Welcome to Tutorialspoint...</h2>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <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.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

Advertisements