Bootstrap Layout

Trying to figure out layout for the hierarchy tree code for work.

by WizKid81

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="navbar-brand" runat="server" href="~/">IA Hierarchy</a>

        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a runat="server" href="~/">Home</a>
                </li>
                <li><a runat="server" href="~/Hierarchy">Hierarchy</a>
                </li>
                <li><a runat="server" href="~/SAHierarchy">Subject Areas</a>
                </li>
                <li><a runat="server" href="~/About">About</a>
                </li>
                <li><a runat="server" href="~/Contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container body-content">
    <div>
        <div class="col-xs-12 text-center" role="alert">
            Alert message.  Center and always at tope of screen
        </div>
    </div>
    <div id="mainContentPanel" data-info="Will contain left and right columns.  Right column is a fixed navpanel">
        <div id="treeDiv">
            Contains the tree and is always on the left.  When too large for screen, will scroll up and down.
        </div>
        <div id="rightPanel">
            Right panel that has the details for selected item.
            </div>
    </div>
</div>
</div>