Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath.
Copy-paste the stylesheet into yourbefore all other stylesheets to load our CSS.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
<script>s near the end of your pages, right before the closing
We use jQuery’s slim build, but the full version is also supported.
<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>
Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.
Our bootstrap.bundle.js and bootstrap.bundle.min.js include Popper, but not jQuery. For more information about what’s included in Bootstrap, please see our contents section.
Alerts for dismissing Buttons for toggling states and checkbox/radio functionality Carousel for all slide behaviors, controls, and indicators Collapse for toggling visibility of content Dropdowns for displaying and positioning (also requires Popper.js) Modals for displaying, positioning, and scroll behavior Navbar for extending our Collapse plugin to implement responsive behavior Tooltips and popovers for displaying and positioning (also requires Popper.js) Scrollspy for scroll behavior and navigation updates
Be sure to have your pages 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. Put it all together and your pages should look like this:
Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.
Bootstrap requires the use of the
HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.
<!doctype html> <html lang="en"> ... </html>
Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
You can see an example of this in action in the starter template.