pega

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>
            <ui:insert name="title">Academics Management</ui:insert></title>
        <h:outputStylesheet library="css" name="bootstrap.min.css"/>
        <ui:insert name="css">
            <!-- other style sheets you might want to include -->
        </ui:insert>
    </h:head>
    <h:body>
        <div id="navbar">
            <ui:insert name="navbar">

                <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="#">Menu</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Students<span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Teachers</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Administrators</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Courses</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Subjects</a>
                        </li>
                    </ul>
                </div>
            </nav>

            </ui:insert>
        </div>
        <div id="main">
            <ui:insert name="main">
                <!-- All the main application content goes here -->
            </ui:insert>
        </div>
        <h:outputScript library="js" name="bootstrap.min.js"></h:outputScript>
        <ui:insert name="scripts">
            <!-- other scripts you might want to include -->
        </ui:insert>
    </h:body>
</html>