Getting Started with Bootstrap 4

What is Bootstrap?

Bootstrap is a front-end framework that is designed to make UI development easier and faster. Bootstrap consists of pre-built CSS and JavaScript files that can be easily added to a project.

Bootstrap provides you with a CSS-driven grid system that you can use to create responsive, mobile-first layouts. Bootstrap also features a comprehensive suite of User Interface components, styles, and jQuery plugins that are ready to use via predefined CSS classes.

Bootstrap requires that you then compose your HTML markup with some specific structural considerations in mind, and use the predefined Bootstrap CSS classes.

Bootstrap is open source under the MIT license, which means it's free for you to use in both personal and commercial projects. Read the Bootstrap License.

Supported Browsers & Devices

Bootstrap 4 supports the latest stable versions of all major browsers on desktop and mobile, including Microsoft IE10+ and Edge. Bootstrap should also work well in alternative browsers that use the latest version of WebKit, Blink, or Gecko. For full details on browser support, see the Bootstrap documentation.

If you require support for IE 8-9, use Bootstrap v3.

Bootstrap 4 does not support the following:

  • Safari for Windows
  • Opera Mini
  • Opera Mobile‚Äôs Turbo mode
  • UC Browser Mini
  • Amazon Silk

Take note of the official list of Bootstrap Browser Bugs, should you encounter any persistent irregularities.

How to Add Bootstrap to your Project

There are several valid ways that Bootstrap can be added to a project, but in this class we will be using the simplest method which is using a CDN (Content Delivery Network).

When using a CDN to load Bootstrap, you do not need to download Bootstrap files.

Please Note: For Capstone we will be managing all of our dependencies, including Bootstrap and jQuery, using NPM and Webpack.

Starter Template

Links to the Bootstrap CDN files can be found in the official Bootstrap documentation, CDNJS, and at BootstrapCDN.

Please Note: The following template includes the full version of jQuery, rather than the slim version listed in the Official Bootstrap docs. This is recommended as it will support a broader range of interactive functionality, especially if you plan to include additional JavaScript features and libraries in your projects. The PWP Contact form validation will require the full verion of jQuery.

<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
        
        <!-- LINK YOUR CSS FILES DOWN HERE -->

        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

        <title>Your Project</title>
    </head>
    <body>
        <h1>Hello Bootstrap 4!</h1>
    </body>
</html>

Template Tags in Detail

<html lang="en">

Declares the language of the web page (English in this case). This assists search engines and browsers. Change this if necessary.

<meta charset="utf-8" />

Tells the browser that the page is written in UTF-8 unicode. This is for internationalization.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

This is the responsive meta tag. This is used to scale and size our content relative to the "viewport" - which is essentially is the visible portion of screen itself. This tag also sets the inital zoom scale to 1:1. This <meta> tag is required when creating a responsive web site.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" />

This loads our Bootstrap CSS file directly from maxcdn. Note the use of Subresource Integrity (SRI).

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This loads the jQuery library from CDNJS. jQuery is required for Bootstrap's JavaScript plugins. Note that we are using the latest minified, full version of jQuery.

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

Popper.js is required for some of Bootstrap's JavaScript plugins like the tooltips, pop-overs, and dropdowns.

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

This is Bootstrap's minified JavaScript file. This is required if you want to use Bootstrap's built-in JS components such as modal windows, dropdown menus, and more.