Using Bootstrap with Moodle

Using Bootstrap with Moodle

by Leticia Dark-rose -
Number of replies: 13

Good Afternoon,

We are currently using Bootstrap 3 and Moodle 2.9. 

I am trying to add code into Moodle for a collapsible panel or accordion panel for our "About Us" pages. I would like them set up so when a student looks at them, they may click and the panel will open, and cover the last panel and so on. Please see the example attached. 

I have managed to add the Bootstrap code successfully however the panels do not move. Can anyone give me some assistance? I have attached the code.

Many Thanks Leticia

<div class="panel-group" id="accordion">

  <div class="panel panel-default" id="panel1">

    <div class="panel-heading">

      <h4 class="panel-title">

        <a data-toggle="collapse" data-target="#collapseOne" href="#collapseOne">

          Collapsible Group Item #1

        </a>

      </h4>

    </div>

    <div id="collapseOne" class="panel-collapse collapse in">

      <div class="panel-body">

        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

      </div>

    </div>

  </div>

  <div class="panel panel-default" id="panel2">

    <div class="panel-heading">

      <h4 class="panel-title">

        <a data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo" class="collapsed">

          Collapsible Group Item #2

        </a>

      </h4>

    </div>

    <div id="collapseTwo" class="panel-collapse collapse">

      <div class="panel-body">

        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

      </div>

    </div>

  </div>

  <div class="panel panel-default" id="panel3">

    <div class="panel-heading">

      <h4 class="panel-title">

        <a data-toggle="collapse" data-target="#collapseThree" href="#collapseThree" class="collapsed">

          Collapsible Group Item #3

        </a>

      </h4>

    </div>

    <div id="collapseThree" class="panel-collapse collapse">

      <div class="panel-body">

        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

      </div>

    </div>

  </div>

</div>

Attachment collapsible.jpg
Average of ratings: -
In reply to Leticia Dark-rose

Re: Using Bootstrap with Moodle

by Hartmut Scherer -

Hi Leticia,

I don't know what needs to change in your code. I copied code from HERE and it worked right away.

With kind regards,

Hartmut

-----------------------

<div class="panel-group" id="accordion"> <!-- accordion 1 -->

   <div class="panel panel-primary">

   

        <div class="panel-heading"> <!-- panel-heading -->

            <h4 class="panel-title"> <!-- title 1 -->

            <a data-toggle="collapse" data-parent="#accordion" href="#accordionOne">

              Collapsible Accordion 1

            </a>

           </h4>

        </div>

<!-- panel body -->

        <div id="accordionOne" class="panel-collapse collapse in">

          <div class="panel-body">

           Lorem ipsum dolor sit amet, consectetur adipisicing elit,

            sed do eiusmod tempor incididunt ut labore et dolore magna

            aliqua. Ut enim ad minim veniam, quis nostrud exercitation

            ullamco laboris nisi ut aliquip ex ea commodo consequat

          </div>

        </div>

  </div>

  

   <div class="panel panel-success">  <!-- accordion 2 -->

 

          <div class="panel-heading"> 

          <h4 class="panel-title"> <!-- title 2 -->

            <a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo">

              Collapsible Accordion 2

            </a>

          </h4>

          </div>

<!-- panel body -->

        <div id="accordionTwo" class="panel-collapse collapse">

          <div class="panel-body">

            Change does not roll in on the wheels of inevitability,

            but comes through continuous struggle.

            And so we must straighten our backs and work for

            our freedom. A man can't ride you unless your back is bent.

          </div>

        </div>

   </div>

   

    <div class="panel panel-warning">  <!-- accordion 3 -->

        <div class="panel-heading">

          <h4 class="panel-title"> <!-- title 3 -->

            <a data-toggle="collapse" data-parent="#accordion" href="#accordionThree">

              Collapsible Accordion 3

            </a>

          </h4>

        </div>

        <div id="accordionThree" class="panel-collapse collapse">

          <!-- panel body -->

          <div class="panel-body">

          You must take personal responsibility.

            You cannot change the circumstances,

            the seasons, or the wind, but you can change yourself.

            That is something you have charge of.

        </div>

     </div>

 

 </div>

Average of ratings: -
In reply to Leticia Dark-rose

Re: Using Bootstrap with Moodle

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

When you say you are using Bootstrap3 - is that from your theme? Which theme?

How are you loading BS3? Do you have the required javascript elements being loaded?

Average of ratings: -
In reply to Leticia Dark-rose

Re: Using Bootstrap with Moodle

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Average of ratings: -
In reply to Mary Evans

Re: Using Bootstrap with Moodle

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Works OK for me here? See above and all I did was copy the HTML from your post!

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Using Bootstrap with Moodle

by Leticia Dark-rose -

Thank you to everyone for the information and assistance. It was an issue with the Javascript not being loaded into the theme completely.

All working now, just a little issue with out main drop-down menu (Site info etc.) but i think that is CSS issue.

Again thank you smile


Average of ratings: -
In reply to Mary Evans

Re: Re: Using Bootstrap with Moodle

by Haakon Meland Eriksen -

Hello, I just installed Moodle 3.0.2 on OpenShift, use the Clean theme, and have tried hard using the examples here and elsewhere - read Bootstrap documentation, Stackoverflow and so on, but

opened items do not collapse when moving to the next item

, so users end up with lots of open items. Any ideas why this happens and how to fix it? I have tried and found the same behaviour both in latest Firefox and Chrome, so I assume it is not a browser problem.


I also switched theme to Gourmet, and pasted their version of collapse from http://elearning.3rdwavemedia.com/blog/add-useful-bootstrap-components-to-moodle-theme-gourmet/1939/ , but it does not seem to make a difference.

See my Moodle3 demo to see the problem in action.

https://moodle3-mor.rhcloud.com/



Average of ratings: -
In reply to Haakon Meland Eriksen

Re: Re: Using Bootstrap with Moodle

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

re Clean: Clean, and the rest of Moodle core is based on Bootstrap 2, so you will need to make sure your code snippets are from BS2, rather than the current documentation which is Bootstrap3 and only applies to themes such as Elegance and Flexibase (and a couple of others). The vast majority of themes follow Moodle core and are based on BS2. That said - are you sure they are supposed to? I haven't specifically looked and you dont tell us exactly which open/collapsed items, but in some cases, its one click to open it, another click to close it, it may not automatically close just because the mouse pointer moves elsewhere.

re Gourmet: This is a commercially sold theme and you will need to speak to the developers themselves about the code snippets they have published to go with it. We are not able to provide support in the community as we are not able to test the theme without purchasing it.

Average of ratings: -
In reply to Richard Oelmann

Svar: Re: Re: Using Bootstrap with Moodle

by Haakon Meland Eriksen -

Aha - my mistake, I thought Moodle 3 released at the end of 2015 contained Bootstrap 3 released in August 2013.

http://getbootstrap.com/javascript/#collapse-example-accordion shows the intended effect I was looking for, but the example does not work with Bootstrap 2 shipped with Moodle 3.


I will check out the other themes you mentioned.


Thanks, Richard!

Average of ratings: -
In reply to Haakon Meland Eriksen

Svar: Re: Re: Using Bootstrap with Moodle

by Haakon Meland Eriksen -
Installed the Bootstrap theme, which is dependency for installing Elegance and FlexiBase, and now it works as expected, i.e. after opening one item and moving on to the next, the previous item is automatically closed. smile (Note: these apply to the accordion at the bottom of my test site, not the upper items at the moment.
Average of ratings: -
In reply to Haakon Meland Eriksen

Re: Svar: Re: Re: Using Bootstrap with Moodle

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

'I thought Moodle 3 released at the end of 2015 contained Bootstrap 3 released in August 2013' - We tried ;) smile

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Svar: Re: Re: Using Bootstrap with Moodle

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Other BS 3 themes:

Shoehorn: https://moodle.org/plugins/pluginversions.php?plugin=theme_shoehorn - where the accordion does work as I use it for block regions.

Bootstrap: https://moodle.org/plugins/pluginversions.php?plugin=theme_bootstrap

Also the BS2 version here: http://getbootstrap.com/2.3.2/javascript.html#collapse - so Clean etc. should work, because M3.0 has the full jQuery JS: https://github.com/moodle/moodle/blob/MOODLE_30_STABLE/theme/bootstrapbase/amd/src/bootstrap.js

Average of ratings: -