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

Bootstrap is based on a grid layout in order to format content based on the screen size (aka Responsive). The horizontal is called a row while the vertical is called a column. Each row contains 12 columns. When setting a column, you tell the browser how many columns that that one column will take.

Static Row and Column Examples

The grey background and black outline are used to help visualize the row and columns.

12-Columns

Col-1
Col-2
Col-3
Col-4
Col-5
Col-6
Col-7
Col-8
Col-9
Col-10
Col-11
Col-12

<div class="row">
  <div class="col-xs-1">Col-1</div>
  <div class="col-xs-1">Col-2</div>
  <div class="col-xs-1">Col-3</div>
  <div class="col-xs-1">Col-4</div>
  <div class="col-xs-1">Col-5</div>
  <div class="col-xs-1">Col-6</div>
  <div class="col-xs-1">Col-7</div>
  <div class="col-xs-1">Col-8</div>
  <div class="col-xs-1">Col-9</div>
  <div class="col-xs-1">Col-10</div>
  <div class="col-xs-1">Col-11</div>
  <div class="col-xs-1">Col-12</div>
</div>

4-Columns

Col-1
Col-2
Col-3
Col-4

<div class="row">
  <div class="col-xs-3">Col-1</div>
  <div class="col-xs-3">Col-2</div>
  <div class="col-xs-3">Col-3</div>
  <div class="col-xs-3">Col-4</div>
</div>

3-Columns

Col-1
Col-2
Col-3

<div class="row">
  <div class="col-xs-4">Col-1</div>
  <div class="col-xs-4">Col-2</div>
  <div class="col-xs-4">Col-3</div>
</div>

2-Columns

Col-1
Col-2

<div class="row">
  <div class="col-xs-6">Col-1</div>
  <div class="col-xs-6">Col-2</div>
</div>

1-Column

Col-1

<div class="row">
  <div class="col-xs-12">Col-1</div>
</div>

Responsive Rows

As you may have noticed above, each column div had an "xs" in between the "col" and the number of columns. This tells the browser, based on the size of the window, how many columns that particular div should take. There are four screen sizes you may chose from:

  • xs (phones)
  • sm (tablets & small screens)
  • md (medium desktops)
  • lg (large desktops)

Bootstrap is developed as mobile first. As such, <div class="col-sm-4">Col-1</div> tells the browser that on phones, this div should take up 12 columns. On small screens and larger, this div will be 4 columns wide.

You can combine multiple column classes to create responsive column layout. For instance, the following row on small+ screens will be 4 columns and only two columns on phones:

Example

Col-1
Col-2
Col-3
Col-4

Example's Code

<div class="row">
  <div class="col-xs-6 col-sm-3">Col-1</div>
  <div class="col-xs-6 col-sm-3">Col-2</div>
  <div class="col-xs-6 col-sm-3">Col-3</div>
  <div class="col-xs-6 col-sm-3">Col-4</div>
</div>

Please note: Whenever your columns add up to more than 12 columns, the last column will bump down.

Example Use of the Grid for a Search Box

Search SPORTDiscus, CINAHL, & PsycINFO Simultaneously

The form itself takes up 9 columns while the picture uses 3.

Code for the Above Search Box

<h3 class="sr-only">Search SPORTDiscus, CINAHL, &amp; PsycINFO Simultaneously</h3>
<script src="http://support.epnet.com/eit/scripts/ebscohostsearch.js" type="text/javascript"></script>
<form id="searchSports" class="well" action="" onsubmit="return ebscoHostSearchGo(this);" method="post">
  <div class="row">
    <div class="col-sm-9">
      <div class="form-group">
        <input id="ebscohostwindow" name="ebscohostwindow" type="hidden" value="1" />
        <input id="ebscohosturl" name="ebscohosturl" type="hidden" value="https://login.databases.wtamu.edu/login?url=http://search.ebscohost.com/login.aspx?direct=true&scope=site&type=1&site=ehost-live&profid=wtbranded&db=s3h&db=ccm&db=psyh&lang=en&authtype=cookie,ip" />
        <input id="ebscohostsearchsrc" name="ebscohostsearchsrc" type="hidden" value="url" />
        <input id="ebscohostsearchmode" name="ebscohostsearchmode" type="hidden" value="+" />
        <input id="ebscohostkeywords" name="ebscohostkeywords" type="hidden" value="" />
        <label for="ebscohostsearchtext">Search SPORTDiscus, CINAHL, &amp; PsycINFO Simultaneously</label>
        <input class="form-control input-lg" id="ebscohostsearchtext" name="ebscohostsearchtext" type="text"/>
      </div>
      <div class="form-group">
        <label class="checkbox-inline"><input type="checkbox" id="chkFullText" name="chkFullText"/>Full Text</label>
        <label class="checkbox-inline"><input type="checkbox" id="chkPeerReviewed" name="chkPeerReviewed"/>Peer Reviewed</label>
      </div>
      <div class="form-group">
        <input class="btn btn-success btn-lg" type="submit" value="Search" />
      </div>
    </div>
    <div class="col-sm-3 hidden-xs">
      <img class="img-responsive" src="https://libapps.s3.amazonaws.com/customers/1476/images/athletics1.png" alt="" role="presentation" aria-hidden="true">
    </div>
  </div>
</form>

For Further Information

This page provided a very brief overview of the possibilities of Bootstrap's grid system. There is much more I could cover but would be outside the scope of this guide.

If you want to know more about Bootstrap's grid system, please see the following resources for the Bootstrap V.3 that LibGuides V.2 is built upon: