Tooling setup
To use the Grunt file and run Bootstrap's documentation locally, you'll need a copy of Bootstrap's source files, Node, and Grunt. Use the following steps to start working with Bootstrap's build process:
- Install the Grunt command line tools,
grunt-cli, withnpm install -g grunt-cli - Navigate to the
root /bootstrapdirectory and runnpm installto install our local dependencies listed inpackage.json - Install Ruby and install Bundler with
gem install bundler, and finally runbundle install. This will install all Ruby dependencies, such as Jekyll and plugins
Now you can run the documentation locally by running the following command from the root /bootstrap directory in your console:
bundle exec jekyll serve
After the preceding step, the documentation and examples are available at http://localhost:/9010.
The HTML starter template
After downloading the Bootstrap source files, you can link the compiled CSS and JavaScript files from the dist folder to your HTML. You can do this by creating a new HTML template. Your HTML template should look like the following:
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"> </head> <body> <h1>Hello, world!</h1> <!-- jQuery first, then Bootstrap JS. --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.2/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script> </body> </html>
As seen above, your HTML code should start with the HTML5 doctype: <!DOCTYPE html>
Responsive meta tag
Because of the responsive and mobile first nature of Bootstrap, your HTML code should also contain a responsive meta tag in the head section which looks like the following:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
The mobile first strategy of Bootstrap means that the code is optimized for mobile devices first. CSS media queries are used to add more features for larger screen sizes.
The X-UA-Compatible meta tag
The X-UA-Compatible is another important meta tag which should be added to the head section of your HTML template. It should look like the following:
<meta http-equiv="x-ua-compatible" content="ie=edge">
The preceding meta tag is forcing Internet Explorer to use its latest rendering mode.
Bootstrap's CSS code
Of course you should also link Bootstrap's CSS code to your HTML document, the example template above loads the CSS code from CDN. You can replace the CDN URI with your local copy found in the dist folder as follows:
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
The JavaScript files
And finally, you should link the JavaScript files at the end of your HTML code for faster loading. Bootstrap's JavaScript plugin requires jQuery, so you have to load jQuery before the plugins. The popover and plugins also require the Tether library which requires jQuery too. Link Tether after jQuery and before the plugins. Your HTML should look like the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.2/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
Of course you can link local copies of the files instead of the CDN URIs too.
