<div class="container" >

<!-- I want the online users to always be visible -->

<!-- I want user form, rooms, and chat views to swap -->

<div class="col-md-4">

<div class="well">

<h3>Online Users</h3>

<ul class="list-group" id="users"></ul>

</div>

</div>

<div class="mainpanel">

<!-- ////////////////////////////////////////////// -->

<div id="userFormArea" class="row"> <!-- This div contains the user form -->

<div class="col-md-8"> <!-- div given a column class -->

<form id="userForm"> <!-- the actual form -->

<div class="form-group"> <!-- div for elements within the form -->

<label>Enter Username</label>

<input class="form-control" autocomplete="off" id="username" />

<br />

<input type="submit" class="btn btn-primary" value="Login" />

</div>

</form>

</div>

</div>

<!-- ////////////////////////////////////////////// -->

<div id="roomArea" class="row">

<div class="col-md-8"> <!-- List of open rooms -->

<div class="well">

<h3>Open Rooms</h3>

<ul class="list-group" id="rooms"></ul>

</div>

</div>

</div>

<!-- ////////////////////////////////////////////// -->

<div id="messageArea" class="row">

<div class="col-md-8">

<div class="chat" id="chat"></div>

<form id="messageForm">

<div class="form-group">

<label>Enter Message</label>

<textarea class="form-control" id="message"></textarea>

<br />

<input type="submit" class="btn btn-primary" value="Send Message" />

</div>

</form>

</div>

</div>

<!-- ////////////////////////////////////////////// -->

</div>

</div>