Bootstrap

Themes ::: theme_bootstrap
Maintained by Bas Brands
This is a Moodle theme based on the Bootstrap CSS framework. It has minimal styling and can be used to create User Experience optimized themes
Latest release:
1404 sites
228 downloads
66 fans
Current versions available: 4
This theme will no longer be updated for newer versions of Moodle. Please use the Moodle 3.7 core themes Boost and Classic as a parent theme.



This is a Moodle theme based on the Bootstrap CSS framework. It has minimal styling and can be used to create User Experience optimized themes.

This theme was created with the help of Stuart Lamour and David Scotson

Please report issues on github: https://github.com/bmbrands/theme_bootstrap/issues

Screenshots

Screenshot #0

Contributors

Bas Brands (Lead maintainer): Focus: technical and design, build the best theme possible
Stuart Lamour: Focus: accessibility, build a true HTML5 theme for everybody
David Scotson: Focus: technical, build a theme for devs and improve Moodle
Please login to view contributors details and/or to contact them

Comments RSS

Comments

  • Susmita Dhar
    Fri, 22 Feb 2013, 6:05 PM
    Hi,
    I am a moodle designer and coder , recently work in moodle with bootstrap, here is a problem with bootstrap js, it's not working in my moodle, i add this code in my config file

    /** List of javascript files that need to included on each page */
    $THEME->javascripts = array('bootstrap','bootstrap.min','bootstrap-datetimepicker.min');
    $THEME->javascripts_footer = array();

    Any body please can som option,

    Regards,
    Mahek Dhar.
  • David Scotson
    Fri, 22 Feb 2013, 6:18 PM
    @mahek

    Have you included JQuery? Bootstrap.js relies on that.

    Also I think "bootstrap" and "bootstrap.min" contain the exact same javascript so you only need one of them.

    You might also want to put those javascripts links in the footer for performance reasons.

    But Javascript's not really my things so maybe someone else will offer some help.
  • Susmita Dhar
    Mon, 25 Feb 2013, 9:17 PM
    Hello David,

    Thank you so much for reply. but still it's not working in drop-down menu after adding (bootstrap-dropdown.js and bootstrap.min.js) js . pls help me someone, thank you.

  • Stojan Kukrika
    Thu, 28 Feb 2013, 10:25 PM
    Hi all.
    I install bootstrap theme and see that when I use more than one language, lang_menu function did not work. Can you help me?
    Web site is on address:
    http://edukacija.lanaco.com
  • David Scotson
    Thu, 28 Feb 2013, 10:41 PM
    Hi Stojan,

    it seems to be a javascript issue. The menu works on my test install and it seems to work here: http://theming.sonsbeekmedia.nl/.

    And I can get your menu to work as long as I hold down the mouse button the whole time until you've selected a new language. But if you just click once (which should open the menu) something gets fired off and submits the form before you get a chance to change the language.

    Do you have any non-Bootstrap javascript that might be interfering with it?
  • David Scotson
    Thu, 28 Feb 2013, 10:43 PM
    Hi Stojan,

    your site seems to be working now. Did you change something?
  • Carlos Bacelar
    Fri, 1 Mar 2013, 5:14 AM
    Hi.. how can i flush the footer to the bottom of page, and flush the columns (left-right) too? can you help me? thanks!
  • Stojan Kukrika
    Fri, 1 Mar 2013, 6:15 PM
    Hi David,
    I find a solution for my problem.
    I use <?php echo $custommenu; ?> insted <?php echo $OUTPUT->lang_menu(); ?> in general.php in bootstrap theme, and in renders.php in theme comment everyting except $content .= $this->lang_menu(); in render_custom_menu function.
    Now it work pefectly.
  • Bas Brands
    Fri, 1 Mar 2013, 10:58 PM
    @Carlos: with bootstrap that is not that difficult. checkout http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

    What do mean with "flush columns" ?
  • Carlos Bacelar
    Sat, 2 Mar 2013, 1:14 AM
    the sidebars, that contains the blocks! last thing: the #page element dont close (
    ).. its right?
  • Carlos Bacelar
    Sat, 2 Mar 2013, 1:38 AM
    extend these columns to footer (sorry)
  • I sell cookies
    Thu, 14 Mar 2013, 11:22 AM
    On Moodle 2.4 this is incompatible with the Experimental CSS Optimizer
  • David Scotson
    Thu, 14 Mar 2013, 7:16 PM
    Thanks for the report. I think there's a setting to opt-out of that. I'll investigate and include it if possible.
  • Ralf Daniel
    Thu, 14 Mar 2013, 8:24 PM
    Hi, first of all this is a great theme!

    I would like to use it for a project, but for this I have to change the font color from the current blue to a darker blue. The same must be done for the background color of the active site in the navigation menu.
    Is there a simple way to do it with custom CSS box within Moodle?

    Also I would like to change the "/" within the breadcrumb navigation to a ">", as this is much more clearer.

    I already went thou the CSS files but without any success.
    Appreciate any help to get this done.
    Thanks!
  • David Scotson
    Thu, 14 Mar 2013, 8:52 PM
    Hi Ralf, I'm not sure what version you're looking at but, if you look at the version that should go into wider testing today then there's a file called renderers/core.php that has the breadcrumb in it. Search for "divider" and you should see a / that you can replace with any character you want.

    Changing colors within Moodle is something for the future. The colors are actually controlled via variables so you should be able to change one value (@linkColor) and it'll affect the whole site. On the downside, this means running a program called "lessc" or "recess" to recompile the .less files into .css files. There will be documentation and examples of tweaking the theme for different color schemes etc. soon but hopefully that's enough to get you going.
Please login to post comments