Bootstrap 4 - Environment Setup

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

Using a CDN

Bootstrap 4 can be used on a website by enabling it from the Content Delivery Network .

Use the below compiled CDN CSS and JS Bootstrap 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 use JavaScript components like modals, tooltips, popups, etc.) before the minified Bootstrap JavaScript if you're using the compiled version of JavaScript.

Following are some components that require jQuery −

• Used for closable alerts

• Switch states with buttons and checkboxes/switches and collapse to switch content

• Carousel for slides, controls and indicators

• Dropdowns ( Popper.js is used for perfect positioning )

• Open and close modals

• To collapse Navbar

• Tooltips and tooltips ( Popper.js is used for perfect positioning )

Used for closable alerts

Switch

states with buttons and checkboxes/switches and collapse to switch content

Carousel for slides, controls and indicators

Dropdowns ( Popper.js is used for perfect positioning )

Open and close modals

To collapse Navbar

Tooltips and tooltips ( Popper.js is used for perfect positioning )

Loading Bootstrap 4

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

Here you can see two buttons −

• Download - By clicking this link, you can download precompiled and collapsed versions of Bootstrap's CSS and JavaScript. No documentation or original source code files are included.

• Download Source Code - By clicking on this you can get the latest version of Bootstrap SCSS, JavaScript source code and documentation files.

Download - By clicking this link, you can download precompiled and collapsed versions of Bootstrap's CSS and JavaScript. No documentation or original source code files are included.

Download Source Code - By clicking on this you can get the latest version of Bootstrap SCSS, JavaScript source code and documentation files.

For better understanding and ease of use, we will be using a precompiled version of Bootstrap throughout the tutorial. Because the files are respected and reduced, you don't have to worry about including separate files for individual functions every time.

File structure

Precompiled Bootstrap 4

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

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

Bootstrap 4 Source Code

If you have downloaded the Bootstrap 4 source code, the file structure will look like this:

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

• The dist/ folder includes everything listed in the precompiled downloads section above.

• Documents/examples/ , contains Bootstrap documentation source code and Bootstrap usage examples.

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

The dist/ folder includes everything listed in the precompiled downloads section above.

Documents/examples/ , contains Bootstrap documentation source code and Bootstrap usage examples.