Required elements for the <head> of a basic document

Pages using Bootstrap require these minimums. In the <head> you need to have these tags.

We need to declare the following information to make sure all browsers see pixels and scale the same way.

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

Following the document information, we must add our styles. We declare the Bootstrap skeleton first, followed by our custom styles/classes, and then a theme file that is going to allow us the change the larger theme, not the elements. So if you want a blue theme, you'd use blue.css and if you want to make a red theme, you'd create a red.css.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link href="./css/colors/blue.css" id="theme" rel="stylesheet">

Required elements for the bottom of a basic document

Pages using Bootstrap require these minimums. In the </body> you need to have these tags.

All of these must preceed the closing </body> tag. jQuery is the most important, followed by Bootstrap, then popper.js as it is a utility used on every page, followed by Bootstrap plugins and then a custom.js that is where you can put all your custom JavaScript.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="./assets/plugins/bootstrap/js/popper.min.js"></script>
<script src="./assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="./js/custom.min.js"></script>