diff --git a/src/main/webapp/bootstrap/carousel.xhtml b/src/main/webapp/bootstrap/carousel.xhtml
index 3469033a..2040ea20 100644
--- a/src/main/webapp/bootstrap/carousel.xhtml
+++ b/src/main/webapp/bootstrap/carousel.xhtml
@@ -372,7 +372,7 @@ see how the standard controls look in a wizard. Don't forget to switch off the a
     
     <br />
     <br />
-    <b:panel look="info">
+    <b:panel look="info" rendered="false">
       <f:facet name="heading">
         <b>Skinning</b>
       </f:facet>
diff --git a/src/main/webapp/forms/DataTable.xhtml b/src/main/webapp/forms/DataTable.xhtml
index d0051da6..ba740772 100644
--- a/src/main/webapp/forms/DataTable.xhtml
+++ b/src/main/webapp/forms/DataTable.xhtml
@@ -13,27 +13,60 @@ td {
 	padding: 8px;
 }
 </style>
-		<h1>DataTable (&lt;b:dataTable /&gt;) <b:badge value="since 0.8.0" /></h1>
+		<h1>DataTable (&lt;b:dataTable /&gt;) <b:badge value="experimental / since 0.8.0" /></h1>
+    <p>Currently, the <code>&lt;b:dataTable &gt;</code> isn't much more than a proof of concept. We plan to 
+    implement a full-blown datatable in the next version of BootsFaces (probably 0.9.0).</p>
     
-    <b:dataTable value="{{carPool.carPool}}" var="car" id="bcarPool" styleClass="table table-striped table-bordered"
+    <h3>Basic usage</h3>
+    
+      <b:tabView activeIndex="1">
+        <b:tab title="JSF markup">
+          <b:well>
+            <script type="syntaxhighlighter"
+              class="brush: xml; toolbar: false;gutter: false; first-line: 1">
+<![CDATA[
+    <b:dataTable value="&num;{carPool.carPool}" var="car" id="bcarPool" styleClass="table table-striped table-bordered"
      style="width:100%">
       <h:column>
         <f:facet name="header">
           <h:outputText value="Brand" />
         </f:facet>
-        <h:outputText value="#{car.brand}" />
+        <h:outputText value="&num;{car.brand}" />
       </h:column>
       <h:column>
         <f:facet name="header">
           <h:outputText value="Type" />
         </f:facet>
-        <h:inputText value="#{car.type}"/>
+        <h:inputText value="&num;{car.type}"/>
       </h:column>
 
     </b:dataTable>
+]]>
+</script>
+			</b:well>
+		</b:tab>
+		<b:tab title="displayed as" contentStyle="border:1px solid ;padding:10px">
+           <b:dataTable value="#{carPool.carPool}" var="car" id="bcarPool" styleClass="table table-striped table-bordered"
+           style="width:100%">
+            <h:column>
+              <f:facet name="header">
+                <h:outputText value="Brand" />
+              </f:facet>
+              <h:outputText value="#{car.brand}" />
+            </h:column>
+            <h:column>
+              <f:facet name="header">
+                <h:outputText value="Type" />
+              </f:facet>
+              <h:inputText value="#{car.type}"/>
+            </h:column>
+          </b:dataTable>
+        </b:tab>
+      </b:tabView>
     
     <h3>Do it yourself</h3>
-    
+    <p>This example shows how to convert the standard JSF datatable without support by BootsFaces. Until we've finished the
+    implementation of  <code>&lt;b:dataTable &gt;</code>, this is the most flexible approach.</p>
     
      <h:dataTable value="{{carPool.carPool}}" var="car" id="carPool" styleClass="table table-striped table-bordered"
      style="width:100%">
@@ -84,14 +117,10 @@ td {
        
     <h3>Advanced usage</h3>
     <ui:include src="dataTable.html" />
-
-		<p>Describe in a few words what <code>&lt;b:image&gt;</code> is about.</p>
-		<h1>Basic usage</h1>
-		<p>Put a short description in simple words here.</p>
     
         <h3>Reference section</h3>
         <ui:include src="DataTableAttributes.xhtml" />
-		<b:panel look="info">
+		<b:panel look="info" rendered="false">
 			<f:facet name="heading">
 				<b>Skinning</b>
 			</f:facet>
diff --git a/src/main/webapp/forms/commandButton.xhtml b/src/main/webapp/forms/commandButton.xhtml
index e4033669..32e63c0d 100644
--- a/src/main/webapp/forms/commandButton.xhtml
+++ b/src/main/webapp/forms/commandButton.xhtml
@@ -33,7 +33,7 @@
                 <h3>The Bootstrap look</h3>
                 <p>By default, command buttons are gray (depending on your theme). You can configure them by using a different look:</p>
                 <h:form>
-                <b:panelGrid columns="2,2,2,2,2,2" size="md" >
+                <b:panelGrid columns="2,2,2,2,2,2" size="sm" >
                   <b:commandButton value="primary" ajax="true" update="@none" look="primary" style="width:80px"/>
                   <b:commandButton value="info" ajax="true" update="@none" look="info"  style="width:80px"/>
                   <b:commandButton value="success" ajax="true" update="@none" look="success"  style="width:80px"/>
@@ -181,51 +181,51 @@
 				            <b:fetchBeanInfos />
                         </b:well>
                         <b:row>
-                            <b:column span="2">
+                            <b:column col-sm="2">
                                 <b:commandButton value="Non-Ajax Submit" />
                             </b:column>
-                            <b:column span="2">
+                            <b:column col-sm="2">
                                 <b:commandButton value="Ajax Submit" ajax="true" update="form:inform infoshow" look="primary" />
                             </b:column>
-                            <b:column span="2">
+                            <b:column col-sm="2">
                                 <b:commandButton value="With Icon" ajax="true" update="form:inform infoshow" icon="plus-sign"
                                     look="success" />
                             </b:column>
-                            <b:column span="2">
+                            <b:column col-sm="2">
                                 <b:commandButton value="Ajax Modal" ajax="true" update="form:inform amodal" look="inverse"
                                     oncomplete="if(validationFailed) alert('Please enter valid input before opening the modal'); else $('#amodal').modal('show')" />
                             </b:column>
-                            <b:column span="1">
+                            <b:column col-sm="1">
                                 <b:commandButton ajax="true" update="form:inform infoshow" iconAwesome="thumbs-up" 
                                                  look="info" tooltip="Thumbs up!" />
                             </b:column>
-                            <b:column span="1">
+                            <b:column col-sm="1">
 	                            <b:commandButton ajax="true" update="form:inform infoshow" 
 	                                             style="padding: 0; border: none; background: none;color: #000"
 	                                             tooltip="This looks like an icon, but it's a commandButton">
 								    <b:iconAwesome name="arrow-down"></b:iconAwesome>
 								</b:commandButton>
 							</b:column>
-                            <b:column span="2">
+                            <b:column col-sm="2">
                                 <b:commandButton value="I'm disabled" disabled="true" ajax="true"
                                                  iconAwesome="thumbs-down" look="info" title="Disabled!" />
                             </b:column>
                         </b:row>
                         <b:row>
-                          <b:column span="2">
+                          <b:column col-sm="2">
                             <p></p> 
                             <p>Partial processing:</p>
                             <p></p> 
                             </b:column>
                         </b:row>
                         <b:row>
-                           <b:column span="2">
+                           <b:column col-sm="3">
                                 <b:commandButton value="Submit first name" ajax="true" update="form:inform infoshow" process="@form:firstname" look="primary" />
                             </b:column>
-                            <b:column span="2">
+                            <b:column col-sm="3">
                                 <b:commandButton value="Submit surname" ajax="true" update="form:inform infoshow" process="@form:familyname" look="primary" />
                             </b:column>
-                           <b:column span="2">
+                           <b:column col-sm="3">
                                 <b:commandButton value="Submit both" ajax="true" update="form:inform infoshow" process="@form:firstname @form:familyname" look="primary" />
                             </b:column>
                         </b:row>
diff --git a/src/main/webapp/forms/selectOneMenu.xhtml b/src/main/webapp/forms/selectOneMenu.xhtml
index 20ca7807..c351b79b 100644
--- a/src/main/webapp/forms/selectOneMenu.xhtml
+++ b/src/main/webapp/forms/selectOneMenu.xhtml
@@ -110,7 +110,7 @@
                         </b:selectOneMenu>
                         Current keeper: &num;{soccerTeamBean.goalkeeper.name}
                     </b:panelGrid>
-                    <b:commandButton value="Submit">
+                    <b:commandButton value="Submit (doesn't work yet)">
                         <f:ajax event="click" execute="@form" render="@form" />
                     </b:commandButton>
 ]]>
@@ -194,7 +194,7 @@ public class Player {
                         </b:selectOneMenu>
                         Current keeper: #{soccerTeamBean.goalkeeper.name}
                     </b:panelGrid>
-                    <b:commandButton value="Submit">
+                    <b:commandButton value="Submit (doesn't work yet)">
                         <f:ajax  event="click" execute="@form" render="@form" />
                     </b:commandButton>
                     </b:well>
diff --git a/src/main/webapp/layout/navLinks.xhtml b/src/main/webapp/layout/navLinks.xhtml
index 56c9f57e..79dba2b0 100644
--- a/src/main/webapp/layout/navLinks.xhtml
+++ b/src/main/webapp/layout/navLinks.xhtml
@@ -48,13 +48,11 @@
                 <p>Both <code>icon</code> and <code>iconAwesome</code> attributes, require the icon name as value the icon name without the trailing <b>glyphicon-</b> prefix and <b>fa-</b> prefix respectively.</p>
                 <p><b:badge value="Hint" /> Bootstrap 4 is going to drop support for the Glyphicon library. We recommend you to chose icons from the Font Awesome library to avoid future incompatibilities.</p>
                 <p>In the following example the <code>b:listLinks</code> tag is used as a container for the NavLinks, showing how to create a Sidebar with links.</p>
-                <b:panel>
-                    <f:facet name="heading"><b>EXAMPLE</b></f:facet>
-                    	<h:form>
+                <b:panel title="Example" look="default">
+                    <h:form>
                     <b:row>
                         <b:column span="3">
-                            <b:panel look="primary">
-                                <f:facet name="heading">Sidebar</f:facet>   
+                            <b:panel look="primary" title="Sidebar">
                                 <b:listLinks>
                                     <b:navLink header="BootsFaces" />
                                     <b:navLink href="http://www.bootsfaces.net" value="BootsFaces"
@@ -81,8 +79,7 @@
                 
                         <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 1">
                         <![CDATA[
-                        <b:panel look="primary">
-                            <f:facet name="heading">Sidebar</f:facet>   
+                        <b:panel look="primary" title="Sidebar">
                             <b:listLinks>
                                 <b:navLink header="BootsFaces" />
                                 <b:navLink href="http://www.bootsfaces.net" value="BootsFaces"
diff --git a/src/main/webapp/layout/wells.xhtml b/src/main/webapp/layout/wells.xhtml
index e2386b66..a10a31f3 100644
--- a/src/main/webapp/layout/wells.xhtml
+++ b/src/main/webapp/layout/wells.xhtml
@@ -12,17 +12,15 @@
                 <p>Use the well as a simple effect on an element to give it an inset effect.</p>
                 
                 <b:panel look="info">
-                    <f:facet name="heading"><b>EXAMPLE  - Well in a container</b></f:facet>
-                    <b:container>
+                    <f:facet name="heading"><b>EXAMPLE  - Well</b></f:facet>
                         <b:row>
                             <b:column col-md="11">
-                                <b:well>
-                                    <h3>Well Header</h3>
-                                    Well content.
-                                </b:well> 
+                              <b:well>
+                                  <h3>Well Header</h3>
+                                  Well, that's the content of the <code>&lt;b:well /&gt;</code>.
+                              </b:well> 
                             </b:column>
                         </b:row>
-                    </b:container>
                     <f:facet name="footer">
                         <strong>Markup:</strong><br/>
 
@@ -30,9 +28,8 @@
                             <![CDATA[
                             <b:well>
                                 <h3>Well Header</h3>
-                                Well content.
+                                Well, that's the content of the <b:well />.
                             </b:well>
-
                             ]]></script>
                     </f:facet>
                 </b:panel>