How to Bootstrap 4 How to... Bootstrap

How to Get Started with Bootstrap

Some people will explain “How to install Bootstrap”. Well, you don’t really “install” it. Using Bootstrap is a matter of referencing the appropriate Bootstrap CSS and/or JS files.

You might have a build process or development environment that utilizes tools such as NPM or Nuget in which case you’ll want read the docs on adding Bootstrap and its’ dependencies.

For this article, you only need to know how to reference Bootstrap on CDN. As shown in the official starter template, the Bootstrap files can be referenced on BootstrapCDN. Just add the link to Bootstrap CSS in the HTML <head> tag of the Web page(s)…

                    
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

Then, the optional Bootstrap Javascript is added to a <script> tag before the closing </body> tag. Bootstrap 4 also requires jQuery and Popper.js which need to be included before the Bootstrap JS.

                    
        <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.0/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

For this article, I’m going use Bootstrap 4 on Codeply since the Bootstrap files are automatically included in Codeply’s editor. This is the fastest option if you’re looking to quickly get started, learn the basics, and prototype Web designs using Bootstrap.

Prev: What is Bootstrap?
Next: How to Use Bootstrap CSS