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.

Introduction

The Navigation Bar provides you the ability to create a fully responsive main navigation bar with many useful tools and options. This page will be particularly useful to those individuals or groups that would like to create a custom header within LibGuides. For those who do not have control over the header, this may still come in handy if you want to create a more in-depth page navigation.

As you will repeatedly find with most of these components, there are accessibility considerations.

Code with Explanations

<nav class="navbar navbar-default">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#basic1" aria-expanded="false">
      <span class="sr-only">Toggle navigation menu</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="https://www.wtamu.edu/library/">Cornette Library</a>
  </div>
  <div class="collapse navbar-collapse" id="basic1">
    <ul class="nav navbar-nav">
      <li><a href="https://infoguides.wtamu.edu/az.php">Databases</a></li>
      <li><a href="https://infoguides.wtamu.edu/">Subject Guides</a></li>
      <li><a href="https://infoguides.wtamu.edu/courseGuides">Course Guides</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Librarians <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="https://infoguides.wtamu.edu/prf.php?account_id=3733">Steve Ely</a></li>
          <li><a href="https://infoguides.wtamu.edu/prf.php?account_id=145227">Kelly Hoppe</a></li>
          <li><a href="https://infoguides.wtamu.edu/prf.php?account_id=57067">Mary Jarvis</a></li>
          <li><a href="https://infoguides.wtamu.edu/prf.php?account_id=57072">Sidnye Johnson</a></li>
          <li><a href="https://infoguides.wtamu.edu/prf.php?account_id=148200">Mary Jordan</a></li>
          <li><a href="https://infoguides.wtamu.edu/prf.php?account_id=57071">Shawna Kennedy-Witthar</a></li>
          <li><a href="https://infoguides.wtamu.edu/prf.php?account_id=89794">Pippin Macdonald</a></li>
          <li><a href="https://infoguides.wtamu.edu/prf.php?account_id=57070">Carolyn Ottoson</a></li>
          <li><a href="https://infoguides.wtamu.edu/prf.php?account_id=57069">Mary Rausch</a></li>
          <li><a href="https://infoguides.wtamu.edu/prf.php?account_id=90377">Bob Smith</a></li>
          <li><a href="https://infoguides.wtamu.edu/prf.php?account_id=57068">Gonda Stayton</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Navbar Customization and Options

The following are further customization options available to you using Bootstrap's Navbar

Insert a Brand Image
You can have a brand icon (e.g. example brand image) instead of a brand name (the "Cornette Library") by placing an <img> inside the <a> instead of text.
Add Forms
Style forms right inside of your navbar.
Use Buttons
Add a button to your navbar.
Aligning Elements within the Navbar
For instance, "My Library Account" on the main menu is aligned right.
Fixed Navbars
You can fix the Navbar to the top or bottom of your page.
Inverted Navbar
Background becomes black and the font is white/gray.

Navigation Bar Accessibility Fixes

The default coloring for the navigation bar is partially WCAG 2.0 AA compliant (good for large text and fails for small text). The following CSS edits are suggestions for making it fully AA and AAA.

Full AA Compliance

.navbar-default .navbar-brand,.navbar-default .navbar-nav>li>a{color: #666666}

Full AAA Compliance

.navbar-default .navbar-brand,.navbar-default .navbar-nav>li>a{color:#4A4A4A}

.navbar-brand:focus, .navbar-default .navbar-brand:hover,.navbar-default .navbar-nav>li>a:hover,navbar-default .navbar-nav>li>a:focus{color:#595959;background-color:#fff}

For Further Information

For further information on Bootstrap Navigation Bars, please see the following websites: