Using Bootstrap in LibGuides

Robert "Bob" Smith

Bob originally created this guide. The goal was to assist librarians in utilizing Bootstrap within LibGuides.

As of Feb. 2nd, 2024, Bob has left the employ of West Texas A&M University.

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.

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

12-Columns

<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

<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

<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

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

1-Column

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

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:

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>

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:

• Bootstrap Documentation
• w3schools