This minimal HTML5 app template shows Bootstrap and JQuery working together. It’s big enough to show off features of both Bootstrap and JQuery but small enough to hollow out and use for your own purposes.
A lot of the Bootstrap examples I’ve seen are far more complicated than they need to be. Copy and paste this code to knock together an attractive, feature-packed website as prototypes or as a starting point for production apps.
It has a little behavior built in:
A preformatted area called a “well” in bootstrap terminology is hidden using a standard CSS
display: none;attribute until you click the Show button.
<div id="showMe" class="well" style="display: none;">Now hide me!</div>
At the same time the well is displayed (using JQuery’s toggle() feature, the button’s text gets changed to Hide:
// When the button is clicked..
// Use JQuery to toggle a Bootstrap "well" div
// Toggle button text based on its current contents
return text === "Show" ? "Hide" : "Show";
Here’s what it looks like after you click.
Try it live here.
The full, commented copy-and-paste code is here:
An error has occurred. Please try again later.