Getting Started with Bootstrap

Here's what you need to include in your web page in order to use Bootstrap 4.

Bootstrap uses its own CSS and JavaScript files, which you need to link to. You should also ensure that your page includes a few standard elements as explained below.

CSS & JavaScript Files

You can link directly to the files via the Bootstrap CDN (Content Delivery Network) at MaxCDN. All Bootstrap plugins use JQuery so you'll need to ensure you're using that too.

Place the following stylesheet code in the document's head:

Place the following javascript files at the bottom of your document (just before the end <body> tag):

Design & Development Standards

To get the most out of Bootstrap 4, make sure your pages incorporate the following.

HTML5 `!DOCTYPE`

Your HTML documents should begin with the HTML5 !DOCTYPE declaration. Like this:

Add the Viewport `<meta>` Tag

To ensure proper rendering and touch zooming on mobile devices, add the viewport meta tag, like this:

You can (optionally), disable zooming capabilities on mobile devices by adding user-scalable=no to the list of content values. However, this is not recommended.

Quick Start: Bootstrap 4 Template

You can use the following template as a basis for your Bootstrap 4 web pages. This template contains the necessary !DOCTYPE preamble, links to CSS and JS files, as well as the viewport meta tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example Template</title>
    <meta charset="utf-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
	
	
    
		
    


    
		
		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

		
		<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>

		
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

The above template includes a container. More on containers next.