Resources

Get Bootstrap 4.4.1
Download Bootstrap 4.4.1 JS files: bootstrap.min.js and bootstrap.min.js.map
Download Bootstrap 4.4.1 CSS files: bootstrap.min.css and bootstrap.min.css.map
Download Bootstrap 4 from getbootstrap.com

Bootstrap CDN
Bootstrap can be downloaded using a CDN if you prefer: Bootstrap CDN Page
Bootstrap CDN links are also found here: Stackpath's Bootstrap CDN Page

Note the links to popper.js, which is required for some Bootstrap features and JS plugins.

Package Managers
The JAMS will not deal with implementing package managers, but if you are interested in working with Composer, information about using Bootstrap with Composer can be found here: Using Bootstrap with Composer
The Composer Page is here: Get Composer Page
Information about using Composer with CodeIgniter is here: CodeIgniter 3 Documentation: Auto-loading Resources

Bootstrap Setup. Add the following files to your site's css folder:

  • bootstrap.min.css
  • bootstrap.min.css.map
Add these files to your site's js folder:
  • bootstrap.min.js
  • bootstrap.min.js.map
  • jquery-3.4.1.min.js (jQuery is required for Bootstrap to function.)

Note: If you have a version update or other variation that changes the file name, that's OK as long as you make sure the link for loading the file works.

Link to the files in the "<head>" section of your HTML document. 

 <DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
            <title>Full Stack Amp Jam Site Project</title>
            <link href="css/bootstrap.min.css" rel="stylesheet">
            <link href="css/your_custom.css" rel="stylesheet">
    
            <script src="js/jquery-3.4.1.min.js" type="application/javascript"></script>
            <script src="js/bootstrap.min.js" type="application/javascript"></script>
            <script src="js/bootstrap.min.js.map" type="application/javascript"></script>
            <script src="js/your_custom.js" type="application/javascript"></script>            
        </head>

The sequence of the links is important. If you expect to overwrite any Bootstrap CSS, place your CSS after Bootstrap. With Javascript, be sure jQuery is first, followed by the Bootstrap files. If your JS has jQuery dependencies, it should follow jQuery, also.

The "map" file is not required for Bootstrap to function, but is used for debugging in the Web Inspector Console.

What is Bootstrap? Bootstrap is a combination Javascript and CSS system for front-end development. Bootstrap is built on jQuery and offers a comprehensive set of front-end development tools for responsive design, layout, and UI components. Bootstrap can streamline your front-end development process. Importantly, it is widely used by UI/UX designers and developers, providing a common set of tools and practices for teams. This makes the time required to learn Bootstrap a good investment for the future.

There are a few major features of Bootstrap that will help you understand what it does:

  • The Grid System. Bootstrap offers a system of containers, rows, and columns that provides a solid layout strategy that is responsive and simple to implement. Learn more here.
  • Consistent Styling. Styling for headlines, lists, forms, tables, and more provides a clean, uniform look with usability and accessibility standards built in. The details are here.
  • UI Components. A wide variety of well thought-out UI components includes nav-bars, drop-down lists, tabs, button groups, modals, and much more. These are set up with event listeners and other necessary features to provide functionality and Javascript customization. See the options here.

How to best use Bootstrap. In large part, Bootstrap is based on CSS classes, and using Bootstrap requires learning about the available classes and what they do. This is especially true for the grid system, where the Bootstrap classes are liberally spread through all the markup. However, there are many UI components that are used less frequently and have complex structures. (For example, the nav-bar, the modal, etc.) For these, it is often possible to find an example of the feature you need in the Bootstrap documentation, copy it into your script, and customize it for your needs without needing to understand how it works in depth. Taking this approach allows you to learn the various features as you need to use them.

Bootstrap is not an all-or-nothing proposition. You can mix and match, using Bootstrap features and stuctures where you need them, and using your own markup and styles where that is better. However, it is best not to fight Bootstrap for control. That is likely to be a frustrating experience, if not a losing battle. It is possible to customize and override styles, etc. to fit your needs, but if you find you are extensively modifying Bootsrap classes and styles, you are probably taking the wrong approach. Let Bootsrap do what it does best, and use your own markup and structures when it is better to design your way.

The best place to start is to learn the grid system, with its hierarchy of containers, rows and columns. This is a natural concept to grasp, and the 12-column system is easy to learn and flexible to use. When you are comfortable with the grid system, branch out into the nav-bars, forms, buttons, and modals. Once you get the idea of how things are set up, you will find each new item gets easier, because there is a logical pattern in the design. And the documentation is generally very good, with examples that can often be used directly. Finally, there is a very large user base, so if you are not sure what to do, there is certain to be a StackOverflow article that will point the way.