Improve the wrapper_mappings explanation.

app/views/documentation/index.html.erb

@@ -24,33 +24,50 @@
   <p>
     Example: Lets build the following form.
   </p>
+</div>
 
-  <div class=".col-md-8">
-    <%= image_tag 'simple_form_bootstrap_form_example.png' %>
-  </div>
+<div class='row'>
+  <%= image_tag 'simple_form_bootstrap_form_example.png' %>
+</div>
 
+<div class='row'>
   <p>
     The code is straightforward and looks like this:
   </p>
 
-  <div class=".col-md-8">
-    <%= image_tag 'basic_form_example.png' %>
-  </div>
+  <%= image_tag 'basic_form_example.png' %>
+</div>
 
+<div class='row'>
   <p>
-    Note that the code is very simple, and the only think you have to set is
-    the wrapper option inside each field.
+    The code is very simple, isn't it?
   </p>
 
   <p>
     But it can get better! We can use the <code>wrapper_mapping</code> option
-    to remove this duplication. Lets see how our code will look like.
+    to remove that wrapper duplication. This option receives a Hash containing an input
+    type and the wrapper that will be used for all inputs with specified type.
   </p>
 
-  <div class=".col-md-8">
-    <%= image_tag 'improved_form_example.png' %>
-  </div>
+  <p>
+    Example:
+    <p>
+      <code>{ string: :string_wrapper, boolean: :boolean_wrapper }</code>
+    </p>
+
+    All the String inputs will now use the <code>:string_wrapper</code>, and the
+    same applies to boolean fields, which will use the <code>:boolean_wrapper</code>
+    for all its inputs.
+    You can see more information about wrapper_mappings
+    <%= link_to 'here.', 'https://github.com/plataformatec/simple_form/blob/master/lib/simple_form.rb#L125-L131' %>
+  </p>
+</div>
+
+<div class="row">
+  <%= image_tag 'improved_form_example.png' %>
+</div>
 
+<div class="row">
   <p>
     Simple, right? You can see the code for the other examples
     <%= link_to 'on github.', 'https://github.com/rafaelfranca/simple_form-bootstrap' %>