Bootstrap Navbar

by Steve Coffman

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<header class="container-fluid amadeus-header">
    <div class="row" role="header">
        <div class="col-xs-12 col-sm-8 col-sm-push-4">
            <div class="dropdown pull-right" th:if="${user != null}"> <a class="dropdown-toggle" id="userName" data-toggle="dropdown" href="#"><span th:text="${user.userLabel}">Default Name</span>  <span class="caret"></span>
            </a>

                <ul id="userList" class="dropdown-menu" role="menu" aria-labelledby="userName">
                    <li><a href="https://weblogin.umich.edu/cgi-bin/logout?https://www.umms.med.umich.edu/msis/applications/">Log Out</a>

                    </li>
                    <li sec:authorize-url="/admin/switch-user" th:unless="${user.isImpersonatingUser()}"><a href="#" th:href="@{/admin/switch-user}">Switch User</a>

                    </li>
                    <li th:if="${user != null and user.isImpersonatingUser()}"><a href="#" th:href="@{/home/switch-again}">Switch User</a>

                    </li>
                    <li th:if="${user != null and user.isImpersonatingUser()}"><a href="#" th:href="@{/home/switch-back}">Switch Back</a>

                    </li>
                    <li class="divider"></li>
                    <li th:if="${not #sets.isEmpty(user.departments) and #sets.size(user.departments) > 1}">	<a class="switch-department" th:attr="data-department-id=${user.focusedDepartment.departmentId},data-department-name=${user.focusedDepartment.departmentName}">
					<em><span th:text="${user.focusedDepartment.departmentName}">Switch to Department</span></em>
					</a>

                    </li>
                    <li sec:authorize-url="/clerkship/switch-department" th:if="${not...

CSS

.col-sm-3, .col-sm-4, .col-sm-6 {
    border: 1px solid #000;
}
.padding-top-5 {
    padding-top: 5px;
}
@media (min-width: 768px) {
    .pull-right-sm {
        float: right !important;
    }
    .pull-left-sm {
        float: left !important;
    }
}
@media (min-width: 992px) {
    .pull-right-md {
        float: right !important;
    }
    .pull-left-md {
        float: left !important;
    }
}
@media (min-width: 1200px) {
    .pull-right-lg {
        float: right !important;
    }
    .pull-left-lg {
        float: left !important;
    }
}

@media (max-width: 767px) {
    .text-center-xs {
       text-align: center;
    }

}