Skip to Main Content

LibGuides Training & Resource Guide

Layout w/ div tags and more!

This example shows three hidden techniques discussed today: 

  • Font Awesome Icons
  • Bootstrap colors
  • <div> tags and bootstrap layout

HCC Coronavirus Updates

Library Hours and Access

HCC Coronavirus Updates

Or, Fill this in with the text editor

<div class="container-fluid">
<div class="row">
<div class="col-sm-6">

<h4 class="bg-danger" style="text-align: center;"><i aria-hidden="true" class="fa fa-warning fa-2x"></i> <a href="https://hccfl.edu/coronavirus" title="HCC Coronavirus updates">HCC Coronavirus&nbsp;Updates</a></h4>

</div>

<div class="col-sm-6">

<p>
Or, fill this in using the text editor
</p>

</div>
</div>
</div>
 

Loading... Get fancy with animations...or not Loading...

Live long and Prosper

Accordion

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.

See the code template below:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
<!-- do not modify above -->
<!-- copy this section below -->
    <div class="panel-heading" role="tab" id="heading1">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapseOne">
          Collapsible Group Item #1 <--CHANGE to Question or item
        </a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
      <div class="panel-body">
       TEXT HERE for answer or explanation
      </div>
    </div>
  </div>
<!-- end copy section -->

<!-- copied below with changed #collapse number and corresponding Heading number (1,2,3, etc)-->
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading2">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
          Collapsible Group Item #2 <--CHANGE to Question or item
        </a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
      <div class="panel-body">
        TEXT HERE for answer or explanation
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading3">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
          Collapsible Group Item #3 <--CHANGE to Question or item
        </a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
      <div class="panel-body">
        TEXT HERE for answer or explanation
      </div>
    </div>
  </div>
</div>

How do I create expandable text (javascript)

Question

Question

Question

W3schools Bootstrap Collapse

Button Actions

text here...

Trigger:
    ...
Button:
    ...