Setup

Add Bootstrap to your project

Quickly add Bootstrap to your project using Bootstrap CDN.

CSS

Copy-paste the stylesheet into your before all other stylesheets to load our CSS.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" >

Many Bootstrap components require the use of JavaScript to function. They require jQuery, Popper.js, and Bootstraps JavaScript plugins. Place the following <script>s near the end of your pages, right before the closing </body> tag. jQuery must come first, then Popper.js, and then our JavaScript plugins.

You can also use jQuery full version instead of jQuery’s slim build.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" ></script>

Components Requiring Javascript

Below table shows components requiring JavaScript.

Components	Description	Bootstrap JS	Popper JS
Alerts	for dismissing	YES
Buttons	for toggling states and checkbox/radio functionality	YES
Carousel	for all slide behaviors, controls, and indicators	YES
Collapse	for toggling visibility of content	YES
Dropdowns	for displaying and positioning	YES	YES
Modals	for displaying, positioning, and scroll behavior	YES
Navbar	for extending our Collapse plugin to implement responsive behavior	YES
Tooltips	for displaying and positioning	YES	YES
Popovers	for displaying and positioning	YES	YES
Scrollspy	for scroll behavior and navigation updates	YES

Important globals

Include the important global styles and settings which are required by Bootstrap for normalization of cross browser styles.

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, page looks with some funky incomplete styling.

<!doctype html>
<html lang="en">
  ...
</html>

Responsive meta tag

Add the responsive viewport meta tag to your <head> to ensure proper rendering and touch zooming for all devices.

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

Starter template

Below is the basic starter template set up with the latest design and development standards that means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors.

snippet

<!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.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- 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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>