From 19a5dbee6109c9177214f6209d408096048c04a9 Mon Sep 17 00:00:00 2001
From: Lance Newman <lancelot316@msn.com>
Date: Mon, 19 Mar 2018 20:57:14 -0400
Subject: [PATCH] fix(doc): updated the form layout in the contact manager
 tutorial

---
 doc/article/en-US/contact-manager-tutorial.md | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/doc/article/en-US/contact-manager-tutorial.md b/doc/article/en-US/contact-manager-tutorial.md
index c34b83bc..870822a4 100644
--- a/doc/article/en-US/contact-manager-tutorial.md
+++ b/doc/article/en-US/contact-manager-tutorial.md
@@ -524,38 +524,37 @@ With that all in place, let's look at the view that will render this component.
         <div class="card-body">
           <form role="form">
             <div class="form-group row">
-              <label class="col-sm-2 form-label">First Name</label>
-              <div class="col-sm-10">
+              <label class="col-sm-3 col-form-label">First Name</label>
+              <div class="col-sm-9">
                 <input type="text" placeholder="first name" class="form-control" value.bind="contact.firstName">
               </div>
             </div>
 
             <div class="form-group">
-              <label class="col-sm-2 control-label">Last Name</label>
-              <div class="col-sm-10">
+              <label class="col-sm-3 col-form-label">Last Name</label>
+              <div class="col-sm-9">
                 <input type="text" placeholder="last name" class="form-control" value.bind="contact.lastName">
               </div>
             </div>
 
             <div class="form-group">
-              <label class="col-sm-2 control-label">Email</label>
-              <div class="col-sm-10">
+              <label class="col-sm-3 col-form-label">Email</label>
+              <div class="col-sm-9">
                 <input type="text" placeholder="email" class="form-control" value.bind="contact.email">
               </div>
             </div>
 
             <div class="form-group">
-              <label class="col-sm-2 control-label">Phone Number</label>
-              <div class="col-sm-10">
+              <label class="col-sm-3 col-form-label">Phone Number</label>
+              <div class="col-sm-9">
                 <input type="text" placeholder="phone number" class="form-control" value.bind="contact.phoneNumber">
               </div>
             </div>
           </form>
+          <div>
+            <button class="btn btn-success float-right" click.delegate="save()" disabled.bind="!canSave">Save</button>
+        </div>
         </div>
-      </div>
-
-      <div class="button-bar">
-        <button class="btn btn-success" click.delegate="save()" disabled.bind="!canSave">Save</button>
       </div>
     </template>
   </source-code>