Bootstrap3: Tab Control Example. two tabs, tab1: form tab2: addres section

gistfile1.html

      <!--tab control for address and contact form-->
      <ul class="nav nav-tabs">
        <li class="active">
          <a href="#formTab" data-toggle="tab">Contact Form</a></li>
        <li>
          <a href="#addressTab" data-toggle="tab">Address</a>
        </li>
      </ul>

      <div class="tab-content">

        <div class="well tab-pane active" id="formTab">
          <!--form Row-->
          <div class="row">
            <!--message form-->
            <form class="form-horizontal" id="contactForm">

              <!--name input-->
              <div class="form-group">
                <label for="nameInput" class="control-label col-md-2">Your Name</label>
                <div class="col-md-10">
                  <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-chevron-down"></span></span>
                    <input type="text"
                      name="nameInput"
                      class="form-control"
                      value=""
                      placeholder="e.g. Your Name" />
                    <span class="input-group-addon">!</span>
                  </div>
                </div>
              </div>

              <!-- email input -->
              <div class="form-group">

                <label for="emailInput" class="control-label col-md-2">Email</label>

                <div class="col-md-10">
                  <div class="input-group">
                    <span class="input-group-addon">@</span>
                    <input type="email"
                      name="emailInput"
                      value=""
                      class="form-control"
                      placeholder="e.g. Your email" />
                  </div>

                </div>

              </div>


              <!--favorite radio group-->
              <div class="form-group">
                <label class="control-label col-md-2">Favorite</label>
                <div class="col-md-10">

                  <!--alternative to radio buttons-->
                  <div class="btn-group btn-group-sm btn" data-toggle="buttons">

                    <label class="btn btn-success">
                      <input type="radio" name="Favorite" value=" " />Dude</label>
                    <label class="btn btn-success">
                      <input type="radio" name="Favorite" value=" " />Donny</label>
                    <label class="btn btn-success">
                      <input type="radio" name="Favorite" value=" " />Maude</label>

                    <!--drop down menu example-->
                    <!--note use tabindex=-1 trick to take hidden items from showing up in the tab order!!-->
                    <div class="btn-group btn-group-sm">
                      <button class="btn btn-success">Other</button>
                      <button class="btn btn-success" data-toggle="dropdown"><span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li>
                          <a href="#" tabindex="-1">Walter</a></li>
                        <li>
                          <a href="#" tabindex="-1">Bunny</a></li>
                        <li class="disabled">
                          <a href="#" tabindex="-1">The Big Lebowski</a>
                        </li>
                      </ul>
                    </div>

                  </div>

                </div>

              </div>
              <!--reason select input-->
              <div class="form-group">
                <label class="control-label col-md-2">Reason</label>

                <div class=" col-md-10">
                  <!--options select-->
                  <!--              <select class="form-control">
                <option>Adoration</option>
                <option>Ordering a White Russian</option>
                <option>Complaint</option>
                <option>I am lost</option>
              </select>-->
                  <!--alternative select method-->
                  <div class="dropdown">
                    <button id="pickButton" class="btn btn-success">Pick One...</button>
                    <button class="btn btn-success" data-toggle="dropdown"><span class="caret"></span></button>

                    <ul id="reasonDropdown" class="dropdown-menu">
                      <li><a href="#" tabindex="-1">Reason</a></li>
                      <li><a href="#" tabindex="-1">Ordering a White Russian</a></li>
                      <li><a href="#" tabindex="-1">Complaint</a></li>
                      <li><a href="#" tabindex="-1">I am lost</a></li>
                    </ul>
                  </div>
                </div>
              </div>

              <!--Message Text Area-->
              <div class="form-group">
                <label class="control-label col-md-2">Message</label>
                <div class=" col-md-10">
                  <textarea cols="40" rows="6" class="form-control" placeholder="e.g. The Message"></textarea>
                </div>
              </div>

              <!--button group-->
              <div class="form-group">
                <div class="col-md-10 col-md-offset-2">

                  <!--submit button-->
                  <input type="submit" value="Submit" class="btn btn-success btn-md" />

                  <!--cancel button-->
                  <a href="index.html" class="btn btn-danger btn-md">Cancel</a>
                </div>
              </div>

            </form>

            <!--        <a href="#sentDialog" class="btn btn-info" data-toggle="modal">Show Dialog</a>-->


          </div>
          <!--end of form row-->
        </div>

        <div class="well tab-pane" id="addressTab">
          <!--address heading-->
          <h3><span class="mgm-oline">Our fake address</span></h3>

          <!--address div-->
          <div>
            <address>
              Big Lebowski Fan Page<br />
              123 Main Street<br />
              Rug Ties The Room Together, CA 98765<br />
              <abbr title="Phone">P:</abbr>
              425.555.0100
            </address>
            <address>
              <strong>Support:</strong>   <a href="mailto:[email protected]">[email protected]</a><br />
              <strong>Marketing:</strong> <a href="mailto:[email protected]">[email protected]</a>
            </address>
          </div>
        </div>

      </div>