Skip to Main Content

Using Bootstrap in LibGuides

LibGuides is built upon Bootstrap, a framework of CSS, JavaScript, and HTML. Librarians can increase the usability and functionality of their guides with Bootstrap’s components without the need of extensive web development experience.

Example Collapse Using a Link or Button

Using a Link

Halloween style with the word BOO!

Using an Button

Halloween style with the word BOO!

Code with Explanations

Using a Link

<a class="btn btn-lib" role="button" data-toggle="collapse" href="#collapseEX1" aria-expanded="false" aria-controls="collapseEX1">Peeka</a>
<div class="collapse" id="collapseEX1">
  <p>Boo!</p>
</div>

Using a Button

The button collapse is very similar to the <a> collapse. However, there are a couple differences to make note below.

<button class="btn btn-lib" type="button" data-toggle="collapse" data-target="#collapseEX2" aria-expanded="false" aria-controls="collapseEX2">Peeka</button>
<div class="collapse" id="collapseEX2">
  <p>Boo!</p>
</div>

Code for Copying

Using a Link

<a class="btn btn-lib" role="button" data-toggle="collapse" href="#collapseEX1" aria-expanded="false" aria-controls="collapseEX1">Peeka</a>
<div class="collapse" id="collapseEX1">
  <p>Boo!</p>
</div>

Using a Button

<button class="btn btn-lib" type="button" data-toggle="collapse" data-target="#collapseEX2" aria-expanded="false" aria-controls="collapseEX2">Peeka</button>
<div class="collapse" id="collapseEX2">
  <p>Boo!</p>
</div>

For Further Information

For further information on collapsing elements using buttons and links, see the following sites for further information

Subjects: CS & CIDM