<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="Pragma" content="no-cache" > <meta http-equiv="X-UA-Compatible" content="IE=edge" > <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" > <meta name="theme-color" content="#00274c" > <title>Bootstrap Application | University of Michigan-Flint</title> <link rel="shortcut icon" href="//cdn.umflint.edu/bootstrap/v4/application/dist/img/favicon.ico" type="image/vnd.microsoft.icon" > <link type="text/css" rel="stylesheet" href="//cdn.umflint.edu/bootstrap/v4/application/dist/css/bootstrap.css" media="all" > </head> <body> <div id="flint-container"> <header id="flint-header"> <div class="container"> <div class="flint-colophon"> <a class="flint-mblock" href="https://www.umflint.edu" title="University of Michigan-Flint" > <span class="sr-only">University of Michigan-Flint</span> <img alt="University of Michigan-Flint" src="data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22block-m%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-20%20-19%2072%2075%22%3E%3Crect%20id%3D%22logo-bg%22%20x%3D%22-20%22%20y%3D%22-19%22%20fill%3D%22none%22%20width%3D%2272%22%20height%3D%2275%22%2F%3E%3Cpolygon%20id%3D%22big-m%22%20fill%3D%22%23FFCB05%22%20points%3D%2216%2C21%205%2C6.5%205%2C18%2010%2C18%2010%2C28%20-10%2C28%20-10%2C18%20-6%2C18%20-6%2C1%20-10%2C1%20-10%2C-9%205%2C-9%2016%2C6%2027%2C-9%2042%2C-9%2042%2C1%2038%2C1%2038%2C18%2042%2C18%2042%2C28%2022%2C28%2022%2C18%2027%2C18%2027%2C6.5%20%22%2F%3E%3Cpath%20id%3D%22flint%22%20fill%3D%22%23FFFFFF%22%20d%3D%22M9.46849%2C42.67113h0.58755L9.77968%2C45.8453H0.1162v-0.65731%20c1.04206-0.08941%2C1.37178-0.22781%2C1.44042-0.93959c0.03214-0.34557%2C0.06976-1.47257%2C0.06976-1.8716L1.541%2C37.58838%20c0-2.49722-0.01685-2.75884-1.51018-2.92783V34h5.44513v0.66055c-1.57994%2C0.11664-1.57994%2C0.1384-1.57994%2C3.10218l0.08538%2C4.55312%20c0.01909%2C1.9936%2C0.08829%2C2.33034%2C1.64044%2C2.36305C7.91198%2C44.6789%2C9.11801%2C44.81953%2C9.46849%2C42.67113z%20M10.68021%2C34.65619%20c1.44098%2C0.20705%2C1.44098%2C0.27905%2C1.45739%2C2.82972l0.08538%2C4.5596v1.55974c-0.01641%2C1.28404-0.25996%2C1.42356-1.45739%2C1.58273%20v0.65731h5.08707v-0.65731c-0.95321-0.07088-1.30034-0.24411-1.38484-0.99083c-0.03594-0.3651-0.05447-1.7342-0.05447-2.16917%20l-0.08538-4.54208c0-2.62267%2C0-2.68696%2C1.4393-2.82537V34h-5.08539L10.68021%2C34.65619L10.68021%2C34.65619z%20M25.07168%2C34.65619%20c1.94506%2C0.07088%2C1.99628%2C0.17334%2C2.0138%2C2.11794l0.08538%2C5.08163l-3.5031-3.82929C21.86213%2C35.78765%2C21.63699%2C35.4585%2C20.61246%2C34%20h-3.68158v0.66055c0.82084%2C0.06865%2C1.09496%2C0.18863%2C1.76969%2C0.81648c-0.01752%2C1.26652%2C0.01618%2C8.13258-0.15605%2C8.94471%20c-0.13852%2C0.69761-0.52594%2C0.7139-1.53206%2C0.76849v0.65508h5.00045v-0.65508c-1.87271-0.19187-2.01056-0.26387-2.01056-2.24117%20l-0.08538-5.94823l4.92723%2C5.56572c0.55429%2C0.67796%2C1.11238%2C1.3701%2C1.66444%2C2.06447L27.60136%2C46h0.73254l0.0884-9.05041%20c0.01741-1.99694%2C0.1374-2.27264%2C1.47268-2.2934V34h-4.82331L25.07168%2C34.65619L25.07168%2C34.65619z%20M-10%2C34v0.66055%20c0.88457%2C0.08282%2C1.26273%2C0.1384%2C1.38807%2C0.71178c0.08673%2C0.37715%2C0.10302%2C1.7419%2C0.10302%2C2.23022l0.08382%2C3.8947%20c0%2C0.33128-0.01696%2C1.79849-0.03549%2C2.09494c-0.03761%2C1.33416-0.19131%2C1.45951-1.45727%2C1.57838v0.68019h5.07445v-0.68019%20c-1.26596-0.11887-1.42345-0.24422-1.45783-1.57838l-0.07668-3.08592h1.35325c1.37066%2C0%2C2.09829%2C0.12646%2C2.18658%2C1.49879h0.58967%20v-4.04288h-0.58967c-0.0692%2C1.31998-0.43386%2C1.44756-1.92718%2C1.44756h-1.61265l0.00223-4.25105%20c0.43374-0.05123%2C0.6774-0.06753%2C1.45672-0.06753c2.39531%2C0%2C3.16759-0.0077%2C3.49139%2C1.90966h0.60764l-0.19299-3.00295L-10%2C34L-10%2C34%20z%20M41.89274%2C34H30.75278l-0.10191%2C3.43245h0.64146c0.10247-2.18658%2C1.02297-2.132%2C2.41116-2.132h1.52703l0.08538%2C8.62314%20c0%2C0.96906-0.31275%2C1.38863-1.44042%2C1.40068v0.5265h5.06853v-0.5265c-1.12811-0.01529-1.4393-0.43162-1.4393-1.40068%20l-0.08538-8.62314h1.52603c1.38863%2C0%2C2.30914-0.05458%2C2.4116%2C2.132h0.63979L41.89274%2C34z%22%2F%3E%3C%2Fsvg%3E" > </a> <h1 class="flint-application-name">Application Name</h1> </div> <ul class="list-bar flint-mini-nav"> <li class="list-bar-item"> <a href="https://www.umflint.edu">Main Website</a> </li> <li class="list-bar-item"> <a href="https://my.umflint.edu">My UM-Flint</a> </li> <li class="list-bar-item"> <a href="https://www.umflint.edu/search">Search UM-Flint</a> </li> </ul> </div> </header> <div class="flint-main-nav"> <nav class="navbar navbar-expand-lg"> <div class="container"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#flint-navbar-nav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <ul class="navbar-nav flint-user-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > Welcome, FirstName LastName! </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#" >Action</a> <a class="dropdown-item" href="#" >Another action</a> <a class="dropdown-item" href="#" >Logout</a> </div> </li> </ul> <div class="collapse navbar-collapse" id="flint-navbar-nav" > <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#" >Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > Dropdown </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#" >Action</a> <a class="dropdown-item" href="#" >Another action</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#" >Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#" >Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" >Disabled</a> </li> </ul> </div> </div> </nav> </div> <nav class="flint-breadcrumb" aria-label="breadcrumb" > <div class="container"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active" aria-current="page" >Data</li> </ol> </div> </nav> <div id="flint-content"> <div class="container"> <p>Content goes here :)</p> </div> </div> <footer id="flint-footer"> Copyright © <script>document.write(new Date().getFullYear());</script> <ul class="list-bar"> <li class="list-bar-item"> <a href="https://www.umflint.edu">University of Michigan-Flint</a> </li> <li class="list-bar-item"> <a href="https://www.umich.edu">University of Michigan-Ann Arbor</a> </li> <li class="list-bar-item"> <a href="https://umdearborn.edu">University of Michigan-Dearborn</a> </li> <li class="list-bar-item"> <a href="http://regents.umich.edu">Regents of the University of Michigan</a> </li> </ul> </footer> </div> <script src="//cdn.umflint.edu/bootstrap/v4/application/dist/js/bootstrap.js" type="text/javascript" ></script> </body> </html>
Add the following script before the ending body tag. Documentation.
<script src="//cdn.umflint.edu/bootstrap/v4/application/dist/js/fontawesome5.js" type="text/javascript"></script>
Add the following CSS before the ending head tag. Documentation.
<link type="text/css" rel="stylesheet" href="//cdn.umflint.edu/bootstrap/v4/application/dist/css/fontawesome4.css" media="all">