Get Bootstrap Crazy with Book Modules

Introduction

Bootstrap

MoodleMootBanner

BootStrap IconBootstrap

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
MoodleMootFooter

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

The difference between school and life: Schools teaches you lessons and then gives you a test. Life gives you a test and you learn the lessons.

Tom Bodett in The End of the Road

MoodleMootFooter

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.

Buttons
Bootstrap includes several predefined button styles:

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
Bootstrap Collapse Accordion example image

Targets
Bootstrap Collapse Target example image

Dropdowns
are toggleable, interactive buttons for displaying lists of links and more.

Jumbotron
A lightweight, flexible component to showcase messages on your site:

learnbps logoLearnbps

Welcome to Bismarck Public School's Blended Spaces.


bps logo uses this site for...

Assignments  Chat  Feedback
Forums  choice  glossary
external tool  lesson  wiki
book  url  database
page  file  quiz

Modal
Are a popup that's customizable and responsive to display videos and images in a website
Modal Example image


MoodleMootFooter

MoodleMootImage