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

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.

ComponentsDescriptionBootstrap JSPopper JS
Alertsfor dismissingYES
Buttonsfor toggling states and checkbox/radio functionalityYES
Carouselfor all slide behaviors, controls, and indicatorsYES
Collapsefor toggling visibility of contentYES
Dropdownsfor displaying and positioningYESYES
Modalsfor displaying, positioning, and scroll behaviorYES
Navbarfor extending our Collapse plugin to implement responsive behaviorYES
Tooltipsfor displaying and positioningYESYES
Popoversfor displaying and positioningYESYES
Scrollspyfor scroll behavior and navigation updatesYES
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>
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents