Topic outline

  • Go ahead and play

    Bootstrap is a framework to build websites from. It contains a ready to use set of CSS and JavaScript that allow developers to create websites that look modern and fresh.

    The key elements that make this framework a success are:

    • it is optimized for usability
    • has responsive design features
    • comes with a set of JavaScript (jQuery) plugins
    • comes with a nice iconset (glypicons)

    This theme contains a mixture of the Bootstrap framework and essential Moodle CSS. From the theme settings you can choose if you want to have the JavaScript plugins and the bootstrap iconset enabled.

    In the topic shown below I have added some Bootstrap eye-candy you implement in your own Moodle environment when using the Bootstrap theme.

  • Typography

  • Tables

    #First NameLast NameUsername
    1 Mark Otto @mdo
    2 Jacob Thornton @fat
    3 Larry the Bird @twitter
    • Bootstrap Accordeon

      This function was added to this course by simply adding some HTML through the HTML source editor. Using this function does not even require a lot of knowledge of HTML. All you need to do is copy the Accordion example from the Bootstrap website and insert it into the HTML Source editor when you edit or create a course topic. Then typ the code you wish to insert into the course topic
      This code is build from a HTML div structure that is recognized by the Bootstrap JavaScript active in this theme. Once you install Bootstrap on your Moodle server and activiate jQuery in the Bootstrap theme settings you can add every function from bootstrap to your course. You will find examples on how to do this on the Bootstrap website.
      Visit this URL to see a code example of the accordion bootstrap function
      • Images

      • Alerts

        Well done! You successfully read this important alert message.
        Heads up! This alert needs your attention, but it's not super important.
        Warning! Best check yo self, you're not looking too good.
        Oh snap! Change a few things up and try submitting again.
        • Buttons

          • Carousel

            The Bootstrap Carousel is a image slider using the Bootstrap JavaScript. To enable this slider copy a Carousel example into your Section editor in HTML mode. Then upload your images using the Moodle image upload functionality.

            • Bootstrap tabs

              The Bootstrap tabs function is another function that can be added to your Moodle course with some simple HTML

              This code is build from a HTML div structure that is recognized by the Bootstrap JavaScript active in this theme. Once you install Bootstrap on your Moodle server and activiate jQuery in the Bootstrap theme settings you can add every function from bootstrap to your course. You will find examples on how to do this on the Bootstrap website.

              Visit this URL for more info on how this works