Learning Bootstrap

• Part 1: Installing and Using
• Part 2: Containers and Rows
• Part 3: Grids
• Part 4: Working with jQuery Plugins

Using Bootstrap

• Part 1: Borders and Colors
• Part 2: Alerts
• Part 3: Buttons
• Part 4: Cards
• Part 5: Forms

Bootstrap is a free and open-source front-end framework for designing HTML- and CSS-based website and web applications.

---

Working with jQuery Plugins

Bootstrap expects jQuery to be loaded in order for its plugins to work correctly. When working with either the local or a CDN version, it is highly recommended to group the loading together and have the bootstrap.{min}.js file be loaded immediately after jQuery.

Most of the built-in plugins in Bootstrap simply work once loaded. Only a few need to be directly loaded. In most cases, using the CSS class or data attribute associated with it. The Components page in the Bootstrap documentation lists all of the possible uses with their names.

bs Namespace

Certain events that Bootstrap adds are under the “bs” namespace. When working with an Alert, for example, the “closed” event is called “closed.bs.alert”. This is true of all of the Components and their associated events: the past participle form of the event is first, the “bs” namespace is next, and then the name of the component.

Popper.js

For tooltips, popovers, and some other user-interface elements, Bootstrap uses the JS library Popper.js. Like with jQuery, this should be loaded before any of the Bootstrap code.

For most of the integrated Popper.js functionality, like with the jQuery usage, element need only the correct attributes to set their values. Because of this, as the example for tooltips points out, all of the tooltips on a page can be enabled through one function call that acts on the data-toggle=”tooltip” attribute value.

Play with the example on Repl.it!