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>