Topic outline

• General

  Collapse all Expand all
  Miscellaneous

  Bootstrap Components

  • Lambda - Professional Moodle Theme - Demo Course

    This demo course shows available components for the Bootstrap framework which can be added to courses or any other content area.

  • 

    Announcements Forum

• Alerts
  • Examples

    ---

    A simple primary alert—check it out!

    A simple secondary alert—check it out!

    A simple success alert—check it out!

    A simple danger alert—check it out!

    A simple warning alert—check it out!

    A simple info alert—check it out!

    A simple light alert—check it out!

    A simple dark alert—check it out!
  • Additional content:

    ---

    Well done!

    Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

    ---

    Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

• Badge
  • Examples

    ---

    Example heading New

    Example heading New

    Example heading New

    Example heading New

    Example heading New

    Example heading New

  • Contextual variations

    ---

    Primary Secondary Success Danger Warning Info Light Dark

• Buttons
  • Examples

    ---

    Primary Secondary Success Danger Warning Info Dark Link
  • Outline buttons

    ---

    Primary Secondary Success Danger Warning Info Dark

• Cards
  • Examples

    ---

    Card with image

    ---

    Card title

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere

    Titles, text, and links

    ---

    Card title

    Card subtitle

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Card link Another link

    Header and footer

    ---

    Featured

    Special title treatment

    With supporting text below as a natural lead-in to additional content.

    Go somewhere

• Collapse
  • Example

    ---

    Click me!

    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  • Multiple targets

    ---

    Toggle first element Toggle second element Toggle both elements

    Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

    Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
  • Accordion example

    ---

    Collapsible Group Item #1

    Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the .show class.

    Collapsible Group Item #2

    Some placeholder content for the second accordion panel. This panel is hidden by default.

    Collapsible Group Item #3

    And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.

• Jumbotrons
  • Examples

    ---

    Hello, world!

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    ---

    It uses utility classes for typography and spacing to space content out within the larger container.

    Learn more

    Fluid jumbotron

    This is a modified jumbotron that occupies the entire horizontal space of its parent.

• Grid System
  • Bootstrap's grid system allows up to 12 columns across the page.

    If you do not want to use all 12 column individually, you can group the columns together to create wider columns:

    col 1	col 1	col 1	col 1	col 1	col 1	col 1	col 1	col 1	col 1	col 1	col 1
    col 4				col 4				col 4
    col 4				col 8
    col 6						col 6
    col 12

    Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.