Quick Start

1. Download the customized Bootstrap library: latest.zip

2. Link the CSS:

   <link href="css/bootstrap.min.css" rel="stylesheet">
   <link href="css/uarkbootstrap.css" rel="stylesheet">

3. Optional Link JQuery and the Bootstrap Javascript libraries:

   <script type="text/javascript" src="path/to/jquery.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>

4. Use the UARK header and departmental footer.

5. Use Bootstrap class names. Of particular note are form-horizontal btn btn-default alert label *-warning *-danger *-success *-primary.

Bootstrap Documentation

See the original Bootstrap Docs.

University of Arkansas Branded Header

<div id="skip">
    <a href="#content">Skip navigation</a>
</div>
<div class="uark-branding">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-push-6">
                <a href="http://www.uark.edu/"
                class="uark-logo">University of Arkansas</a>
            </div>
            <div class="col-sm-6 col-sm-pull-6">
                <a class="branding-dept navbar-text"
                href="http://dept.uark.edu">Department Name</a>
            </div>
        </div>

    </div>
</div>
<nav class="navbar navbar-static-top navbar-inverse"
    role="navigation">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
    <button type="button" class="navbar-toggle"
        data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="CHANGE_ME">Application Name</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse hidden-print">
    <ul class="nav navbar-nav">
    </ul>
  </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>

User Menu

After the user has logged in, replace the Log in link with a user-centric dropdown. The first section is intended for in-application links, the second for university links (PASSweb, AskIT, etc.). If the application supports it, include a Log out link as the last item. See also: Single Sign On.

<ul class="nav navbar-nav navbar-right navbar-inverse">
<li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            username <b class="caret"></b>
         </a>
        <ul class="dropdown-menu">
            <li><a href="#admin" title="Admin">Admin</a></li>                   <li class="divider"></li>
            <li><a href="http://password.uark.edu/">Password Manager</a></li>
            <li><a href="http://askit.uark.edu/">AskIT</a></li>

            <li class="divider"></li>
            <li><a href="#logout">Log out</a></li>
        </ul>
    </li>
</ul>

Department-specific Footer

The IT Services footer is shown below. Replace with department-specific information. Generally, the footer will be placed within your top-level <div class="container"> </div>.

<hr>
<footer id="footer" class="row">
    <div class="footer-col col-xs-6 col-md-3">
        <h4>IT Services</h4>
        <ul class="list-unstyled">
            <li>479-575-2901</li>
            <li><a href="https://its.uark.edu/about/index.php">
                Mailing Address
            </a></li>
            <li><a href="http://its.uark.edu/">its.uark.edu</a></li>
        </ul>
    </div>

    <div class="footer-col col-xs-6 col-md-3">
        <h4>Help Desk</h4>
        <ul class="list-unstyled">
        <li>479-575-2905</li>
        <li><a href="http://its.uark.edu/help_desk#hours">Hours</a></li>
        <li><a href="http://its.uark.edu/help_desk#report">
            Report an Outage
        </a></li>
        <li><a href="http://askit.uark.edu/">AskIT Online Help</a></li>
        </ul>
    </div>


    <div class="footer-col col-xs-6 col-md-3">
        <h4>Links</h4>
        <ul class="list-unstyled">
        <li><a href="http://password.uark.edu/">Password Manager</a></li>
        <li><a href="http://techarticles.uark.edu/">Tech Articles</a></li>
        <li><a href="http://its.uark.edu/alert_calendar">Alert Calendar</a></li>
        <li><a href="http://its.uark.edu/news">News Archive</a></li>
        </ul>
    </div>

    <div class="footer-col col-xs-6 col-md-3">
        <h4>Updates</h4>
        <ul class="list-unstyled">
        <li><a class="icn-facebook" href="http://www.facebook.com/uarkITS">
            Facebook
        </a></li>
        <li><a class="icn-twitter" href="http://twitter.com/uaits">
            Twitter
        </a></li>
        </ul>
    </div>
</footer>

Coding Guidelines

Forms

Follow the Style Guides for University Online Forms.

Single Sign On (Shibboleth and InCommon)

New applications should use Shibboleth or a Single Sign On provider (do not use LDAP or AD directly). Contact the IT Services Security team at security@uark.edu for details.