Arizona Banner
<body>
  <!--   ++++++++++++++ Place inside body tag ++++++++++++++   -->
  <header id="region_header_ua" class="l-arizona-header bg-red">
    <section class="container l-container">
      <div class="row">
        <a href="http://www.arizona.edu" title="The University of Arizona homepage" class="arizona-logo">
           <img alt="The University of Arizona Wordmark Line Logo White" src="https://cdn.uadigital.arizona.edu/logos/v1.0.0/ua_wordmark_line_logo_white_rgb.min.svg" class="arizona-line-logo">
        </a>
       </div>
     </section>
  </header>
LOGO CODE
<div id="site_identifier">
  <a href="#"><img src="img/placeholder-logo.png"></a>
</div>
UTILITY LINKS CODE
<div id="header_site">
 <!--   ++++++++++++++ Below Required Container #header_site ++++++++++++++   -->
    <div id="utility_links">
     <ul>
       <li><a href="#">Utility Link 1</a></li>
       <li><a href="#">Utility Link 2</a></li>
       <li><a href="#">Utility Link 3</a></li>
     </ul>
   </div>
SEARCH BOX CODE
<div id="header_site">
<!--   ++++++++++++++ Below Required Container #header_site ++++++++++++++   -->
  <div class="form-group">
    <label class="sr-only" for="ua-bootstrap-search">Search</label>
    <div class="search-form">
      <input class="form-control input-search" id="ua-bootstrap-search" type="text" placeholder="Search for...">
      <input class="btn-search" type="submit" name="op" value="Search">
    </div>
  </div>
MENU CODE
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="navbar-header">
        <button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="false"><a href="index.html">Getting Started</a></li>
          <li class="false"><a href="css.html">CSS</a></li>
          <li class="false"><a href="fonts.html">Fonts</a></li>
          <li class="active"><a href="interior-example.html">Example</a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- /.nav-collapse-->
</div>
BREADCRUMB CODE
<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Parent Page</a></li>
  <li class="active">Page Title</li>
</ol>

Page Title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Subheading Example
<p class="lead">...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi this is how a link looks architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et.

Button styleButton style

 

Paragraph Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  1. Quisque leo sapien, mattis vitae nulla
  2. Tempus ullamcorper purus
  3. Aliquam vulputate suscipit ex, ut laoreet enim accumsan nec
LIST STRUCTURE
<ul>
  <li>Nam eu vehicula risus</li>
  <li><a href="#">Integer sodales magna lacus</a></li>
  <li>Efficitur auctor augue ornare at</li>
</ul>
<ul class="triangle">
  <li>Nam quis auctor justo</li>
  <li><a href="#">Aenean lobortis est sit amet ipsum porttitor</a></li>
  <li>Sed fringilla lorem consequat</li>
</ul>
<ol>
  <li>Quisque leo sapien, mattis vitae nulla</li>
  <li><a href="#">Tempus ullamcorper purus</a></li>
  <li>Aliquam vulputate suscipit ex, ut laoreet enim accumsan nec</li>
</ol>

 

Building Year Built Fun Fact
Old Main 1891 Declared unsafe in 1938 and almost demolished
Nugent Building 1937 Originally the Administration Building
Koffler Building 1992 The large arch represents research breakthroughs made by UA scientists
Bear Down Gym 1926 The main sports arena for basketball until 1970
Meinel Optical Sciences 1970 2007 AIA National Honor Award for Architecture
TABLE CODE
<table class="table table-striped">
    <thead>
        <tr>
            <th>Building</th>
            <th>Year Built</th>
            <th>Fun Fact</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Old Main</td>
            <td>1891</td>
            <td>Declared unsafe in 1938 and almost demolished</td>
        </tr>
        <tr>
            <td>Nugent Building</td>
            <td>1937</td>
            <td>Originally the Administration Building</td>
        </tr>
        <tr>
            <td>Koffler Building</td>
            <td>1992</td>
            <td>The large arch represents research breakthroughs made by UA scientists</td>
        </tr>
        <tr>
            <td>Bear Down Gym</td>
            <td>1926</td>
            <td><a href="#">The main sports arena for basketball until 1970</a>
</td>
        </tr>
        <tr>
            <td>Meinel Optical Sciences</td>
            <td>1970</td>
            <td>2007 AIA National Honor Award for Architecture</td>
        </tr>
    </tbody>
</table>

INPUT FORM CODE
<div class="form-group">
    <label for="exampleInputEmail1">Input Title</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Placeholder text">
</div>
<div class="form-group">
    <label for="exampleInputEmail1">Input Title</label>
    <textarea class="form-control" rows="5" placeholder="Placeholder text"></textarea>
</div>
CHECKBOX CODE
<!-- For the checkboxes to render properly the minimum requirements are shown. -->
<div class="input-group">
  <label>Checkboxes<span title="This field is required." class="form-required">*</span></label>
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">    Option one is this and that—be sure to include why it's great
    </label>
  </div>
  <div class="checkbox disabled">
    <label>
      <input type="checkbox" value="" disabled="">    Option two is disabled
    </label>
  </div>
</div>
INLINE CHECKBOX CODE
<div class="form-group">
  <label>Inline Checkboxes<span title="This field is required." class="form-required">*</span></label>
  <div class="checkbox checkbox-inline">
    <label>
      <input type="checkbox" value="">Check box 1
    </label>
  </div>
  <div class="checkbox checkbox-inline">
    <label>
      <input type="checkbox" value="">Check box 2
    </label>
  </div>
  <div class="checkbox checkbox-inline">
    <label>
      <input type="checkbox" value="">Checkbox 3
    </label>
  </div>
</div>
RADIO CODE
<div class="input-group">
  <label>Radios<span title="This field is required." class="form-required">*</span>
    <div class="radio">
      <label>
        <input id="optionsRadios1" type="radio" name="optionsRadios" value="option1" checked="">    Option one is this and that—be sure to include why it's great
      </label>
    </div>
    <div class="radio">
      <label>
        <input id="optionsRadios2" type="radio" name="optionsRadios" value="option2">    Option two can be something else and selecting it will deselect option one
      </label>
    </div>
    <div class="radio disabled">
      <label>
        <input id="optionsRadios3" type="radio" name="optionsRadios" value="option3" disabled="">    Option three is disabled
      </label>
    </div>
  </label>
</div>
INLINE RADIO CODE
<div class="input-group">
  <label>Inline Radios<span title="This field is required." class="form-required">*</span></label>
  <label class="radio-inline">
    <input id="inlineRadio1" type="radio" name="inlineRadioOptions" value="option1"> Radio 1
  </label>
  <label class="radio-inline">
    <input id="inlineRadio2" type="radio" name="inlineRadioOptions" value="option2"> Radio 2
  </label>
  <label class="radio-inline">
    <input id="inlineRadio3" type="radio" name="inlineRadioOptions" value="option3"> Radio 3
  </label>
</div>