Get Bootstrap Crazy with Book Modules
Completion requirements
![Moodle Header](https://learnbps.bismarckschools.org/pluginfile.php/535022/mod_book/chapter/75350/MoodleMoot_Generic_1000x172.png)
Get Bootstrap Crazy with Book Modules
David Sherwin, Bismarck Public School District
![](https://learnbps.bismarckschools.org/pluginfile.php/535001/mod_book/intro/MoodleMoot_Footer_1000x172.png)
Introduction
Bootstrap
![MoodleMootBanner](https://learnbps.bismarckschools.org/pluginfile.php/535022/mod_book/chapter/75350/MoodleMoot_Footer_1000x172.png)
Grid System
Uses the responsive flexbox grid to build layouts of all shapes and sizes to a twelve column system.
Uses a series of containers, rows, and columns to layout and align content.
Example
Example
![MoodleMootFooter](https://learnbps.bismarckschools.org/pluginfile.php/535022/mod_book/chapter/75350/MoodleMoot_SmHDR_1000x28.png)
Heading | Example | Display Heading | Handle |
---|---|---|---|
<h1> </h1> |
Heading 1 |
<h1 class="display-1"> </h1> |
Display 1 |
<h2> </h2> |
Heading 2 |
<h1 class="display-2"> </h1> |
Display 2 |
<h3> </h3> |
Heading 3 |
<h1 class="display-3"> </h1> |
Display 3 |
<h4> </h4> |
Heading 4 |
<h1 class="display-4"> </h1> |
Display 4 |
<h2>Customized <small class="text-muted"> Heading</small></h2> | Customized Heading |
||
Blockquotes |
|
![MoodleMootFooter](https://learnbps.bismarckschools.org/pluginfile.php/535022/mod_book/chapter/75350/MoodleMoot_SmHDR_1000x28.png)
Alerts
Use color to add a visual indication
Alerts can also contain additional HTML elements like headings, paragraphs and dividers
It’s possible to dismiss any alert inline
Color choices of primary - secondary - info - success - warning - danger
Alerts
Use color to add a visual indication
Alerts can also contain additional HTML elements like headings, paragraphs and dividers
It’s possible to dismiss any alert inline
Color choices of primary - secondary - info - success - warning - danger
Badge
While the styling of badges provides a visual cue they may be confusing for users.
Badge
While the styling of badges provides a visual cue they may be confusing for users.
Buttons
Bootstrap includes several predefined button styles:
Buttons
Bootstrap includes several predefined button styles:
Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel
Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel
Collapse
Toggle the visibility of content across your project
Accordion
Targets
Collapse
Toggle the visibility of content across your project
Accordion
Accordion
![Bootstrap Collapse Accordion example image](https://learnbps.bismarckschools.org/pluginfile.php/535022/mod_book/chapter/75377/BS-CollapseAccordian.png)
Targets
Targets
![Bootstrap Collapse Target example image](https://learnbps.bismarckschools.org/pluginfile.php/535022/mod_book/chapter/75377/BS-CollapseTarget.png)
Dropdowns
are toggleable, interactive buttons for displaying lists of links and more.
Dropdowns
are toggleable, interactive buttons for displaying lists of links and more.
Jumbotron
A lightweight, flexible component to showcase messages on your site:
Learnbps
Welcome to Bismarck Public School's Blended Spaces.
Jumbotron
A lightweight, flexible component to showcase messages on your site:
Learnbps
Welcome to Bismarck Public School's Blended Spaces.
Modal
Are a popup that's customizable and responsive to display videos and images in a website
![Modal Example image](https://learnbps.bismarckschools.org/pluginfile.php/535022/mod_book/chapter/75377/ModalImage.png)
Modal
Are a popup that's customizable and responsive to display videos and images in a website
![Modal Example image](https://learnbps.bismarckschools.org/pluginfile.php/535022/mod_book/chapter/75377/ModalImage.png)
![Modal Example image](https://learnbps.bismarckschools.org/pluginfile.php/535022/mod_book/chapter/75377/ModalImage.png)
![MoodleMootFooter](https://learnbps.bismarckschools.org/pluginfile.php/535022/mod_book/chapter/75350/MoodleMoot_SmHDR_1000x28.png)
![MoodleMootImage](https://learnbps.bismarckschools.org/pluginfile.php/535022/mod_book/chapter/75350/MoodleMood600x100.png)