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 Collapsing Accordion

Example One Body

Example Two Body

Example Three Body

Code with Explanations

<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">
  <div class="panel panel-warning">
    <div class="panel-heading" id="heading1" role="tab">
      <h3 class="panel-title"><a aria-controls="example1" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#example1" role="button">Example One Heading <span class="glyphicon glyphicon-collapse-down"></span></a></h3>
    </div>
    <div aria-labelledby="heading1" class="panel-collapse collapse in" id="example1" role="tabpanel">
      <div class="panel-body">
        <p>Example One Body</p>
      </div>
    </div>
  </div>
  <div class="panel panel-warning">
    <div class="panel-heading" id="heading2" role="tab">
      <h3 class="panel-title"><a aria-controls="example2" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#example2" role="button">Example Two Heading <span class="glyphicon glyphicon-collapse-down"></span></a></h3>
    </div>
    <div aria-labelledby="heading2" class="panel-collapse collapse" id="example2" role="tabpanel">
      <div class="panel-body">
        <p>Example Two Body</p>
      </div>
    </div>
  </div>
  <div class="panel panel-warning">
    <div class="panel-heading" id="heading3" role="tab">
      <h3 class="panel-title"><a aria-controls="example3" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#example3" role="button">Example Three Heading <span class="glyphicon glyphicon-collapse-down"></span></a></h3>
    </div>
    <div aria-labelledby="heading3" class="panel-collapse collapse" id="example3" role="tabpanel">
      <div class="panel-body">
        <p>Example Three Body</p>
      </div>
    </div>
  </div>
</div>

Code for Copying

<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">
  <div class="panel panel-warning">
    <div class="panel-heading" id="heading1" role="tab">
      <h3 class="panel-title"><a aria-controls="example1" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#example1" role="button">Example One Heading <span class="glyphicon glyphicon-collapse-down"></span></a></h3>
    </div>
    <div aria-labelledby="heading1" class="panel-collapse collapse in" id="example1" role="tabpanel">
      <div class="panel-body">
        <p>Example One Body</p>
      </div>
    </div>
  </div>
  <div class="panel panel-warning">
    <div class="panel-heading" id="heading2" role="tab">
      <h3 class="panel-title"><a aria-controls="example2" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#example2" role="button">Example Two Heading <span class="glyphicon glyphicon-collapse-down"></span></a></h3>
    </div>
    <div aria-labelledby="heading2" class="panel-collapse collapse" id="example2" role="tabpanel">
      <div class="panel-body">
        <p>Example Two Body</p>
      </div>
    </div>
  </div>
  <div class="panel panel-warning">
    <div class="panel-heading" id="heading3" role="tab">
      <h3 class="panel-title"><a aria-controls="example3" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#example3" role="button">Example Three Heading <span class="glyphicon glyphicon-collapse-down"></span></a></h3>
    </div>
    <div aria-labelledby="heading3" class="panel-collapse collapse" id="example3" role="tabpanel">
      <div class="panel-body">
        <p>Example Three Body</p>
      </div>
    </div>
  </div>
</div>

Customization

The default collapsing panel only allows the heading text to be clickable. I have created custom CSS to ensure the entire heading is clickable.

Custom Code

div.panel-group div.panel-heading a{text-decoration:none;display:block;padding:10px 15px;}

div.panel-group div.panel-heading a:focus,div.panel-group div.panel-heading a:hover{box-shadow:0 0 1.5px 1.5px grey}

div.panel-group .panel-heading{padding:0}

For Further Information

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