diff --git a/pages/layout/boxed.html b/pages/layout/boxed.html
index 47ea2558..43da9f44 100644
--- a/pages/layout/boxed.html
+++ b/pages/layout/boxed.html
@@ -21,7 +21,7 @@
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
     <![endif]-->
   </head>
-  <!-- ADD THE CLASS layout-boxed TO GET A FIXED HEADER AND SIDEBAR LAYOUTS -->
+  <!-- ADD THE CLASS layout-boxed TO GET A BOXED LAYOUT -->
   <body class="skin-blue layout-boxed">
     <!-- Site wrapper -->
     <div class="wrapper">
@@ -33,9 +33,6 @@
           <!-- Sidebar toggle button-->
           <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
             <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
           </a>
           <div class="navbar-custom-menu">
             <ul class="nav navbar-nav">
@@ -346,7 +343,10 @@
 
         <!-- Main content -->
         <section class="content">
-
+          <div class="callout callout-info">
+            <h4>Tip!</h4>
+            <p>Add the layout-boxed class to the body tag to get this layout. The boxed layout is helpful when working on large screens because it prevents the site from stretching very wide.</p>
+          </div>
           <!-- Default box -->
           <div class="box">
             <div class="box-header with-border">
diff --git a/pages/layout/collapsed-sidebar.html b/pages/layout/collapsed-sidebar.html
index 4d35dd36..05b01695 100644
--- a/pages/layout/collapsed-sidebar.html
+++ b/pages/layout/collapsed-sidebar.html
@@ -21,8 +21,8 @@
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
     <![endif]-->
   </head>
-  <!-- ADD THE CLASS layout-boxed TO GET A FIXED HEADER AND SIDEBAR LAYOUTS -->
-  <body class="skin-blue sidebar-collapse">
+  <!-- ADD THE CLASS sidedar-collapse TO HIDE THE SIDEBAR PRIOR TO LOADING THE SITE -->
+  <body class="skin-blue sidebar-collapse fixed">
     <!-- Site wrapper -->
     <div class="wrapper">
       <!-- header logo: style can be found in header.less -->
@@ -211,7 +211,7 @@
                 <li><a href="top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
                 <li><a href="boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
                 <li><a href="fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
-                <li><a href="collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
+                <li class="active"><a href="collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
               </ul>
             </li>
             <li>
@@ -346,7 +346,10 @@
 
         <!-- Main content -->
         <section class="content">
-
+          <div class="callout callout-info">
+            <h4>Tip!</h4>
+            <p>Add the sidebar-collapse class to the body tag to get this layout</p>
+          </div>
           <!-- Default box -->
           <div class="box">
             <div class="box-header with-border">
diff --git a/pages/layout/fixed.html b/pages/layout/fixed.html
index ab94df10..7a7decbb 100644
--- a/pages/layout/fixed.html
+++ b/pages/layout/fixed.html
@@ -21,7 +21,7 @@
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
     <![endif]-->
   </head>
-  <!-- ADD THE CLASS fixed TO GET A FIXED HEADER AND SIDEBAR LAYOUTS -->
+  <!-- ADD THE CLASS fixed TO GET A FIXED HEADER AND SIDEBAR LAYOUT -->
   <body class="skin-blue fixed">
     <!-- Site wrapper -->
     <div class="wrapper">
@@ -346,7 +346,10 @@
 
         <!-- Main content -->
         <section class="content">
-
+          <div class="callout callout-info">
+            <h4>Tip!</h4>
+            <p>Add the fixed class to the body tag to get this layout. The fixed layout is your best option if your sidebar is bigger than your content because it prevents extra unwanted scrolling.</p>
+          </div>
           <!-- Default box -->
           <div class="box">
             <div class="box-header with-border">
diff --git a/pages/layout/top-nav.html b/pages/layout/top-nav.html
index 4efe6061..ba9cf276 100644
--- a/pages/layout/top-nav.html
+++ b/pages/layout/top-nav.html
@@ -21,6 +21,7 @@
         <script src="../../https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
     <![endif]-->
   </head>
+  <!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->
   <body class="skin-blue layout-top-nav">
     <div class="wrapper">
       <!-- header logo: style can be found in header.less -->
@@ -90,6 +91,14 @@
 
           <!-- Main content -->
           <section class="content">
+            <div class="callout callout-info">
+              <h4>Tip!</h4>
+              <p>Add the layout-top-nav class to the body tag to get this layout. This feature can also be used with a sidebar! So use this class if you want to remove the custom dropdown menus from the navbar and use regular links instead.</p>
+            </div>
+            <div class="callout callout-danger">
+              <h4>Warning!</h4>
+              <p>The construction of this layout differs from the normal one. In other words, the HTML markup of the navbar and the content will slightly differ than that of the normal layout.</p>
+            </div>
             <div class="box box-default">
               <div class="box-header with-border">
                 <h3 class="box-title">Blank Box</h3>
