<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
      <img src="http://www.my-sisters-house.org/wp-content/uploads/2015/02/calvcp-logo-color@2000-300x90.png" alt="CalVCP logo" width="200" class="img-responsive header-logo"></div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="defaultNavbar1">

      <ul class="nav navbar-nav navbar-right">
        <li><a href="vcp.html">Home</a></li>
        <li><a href="vcp-profile.html">Profile</a></li>
        <li class="active"><a href="#" data-toggle="modal" data-target="#newApplication">New Application</a></li>
        <li><a href="vcp-contact-us.html">Contact Us</a></li>
        <li><a href="vcp-help.html">Help/FAQ</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Language <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="vcp.html">English</a></li>
            <li><a href="vcp-sp.html">Spanish</a></li>
            <li><a href="vcp-ru.html">Russian</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>


<!-- Start New Application Modal -->
<div class="modal fade" id="newApplication" tabindex="-1" role="dialog" aria-labelledby="newApplication">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Start new Application</h4>
      </div>
      
      <div class="modal-body">
        <div class="form-group">
          <label for="exampleInputEmail1">Application Name</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Brother's death">
        </div>
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <a href="vcp-application.html" role="button" class="btn btn-success btn-large">Continue</a>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="col-lg-12 col-md-12">
    <div class="page-header">
      <h1>Brother's Death &nbsp;<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#editAppName"><span class="glyphicon glyphicon-pencil"> </span> Edit</button></h1>

      <!-- Edit Application Name Modal -->
      <div class="modal fade" id="editAppName" tabindex="-1" role="dialog" aria-labelledby="editAppName">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Edit Application Name</h4>
            </div>
            
            <div class="modal-body">
              <div class="form-group">
                <label for="exampleInputEmail1">Application Name</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Brother's death">
              </div>
            </div>
            
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
              <a href="vcp-application.html" role="button" class="btn btn-success btn-large">Edit</a>
            </div>
          </div>
        </div>
      </div> <!-- / Edit Application Name Modal -->
    </div> <!-- / Page Header -->
  </div>


  <div class="row">
    
    <!-- Sidebar -->
    <div class="text-justify col-lg-3 col-sm-3 col-md-3">
      <h4 class="hidden-xs">Progress</h4>
      <div class="visible-xs-block">
        <a id="progress-button" class="btn btn-default" role="button">
          <span class="glyphicon glyphicon-menu-hamburger"></span> Progress
        </a>
        <br /><br />
      </div>
      <ul id="progress-menu" class="nav nav-pills nav-stacked hidden-xs">
        <li role="presentation" class="active"><a href="vcp-application.html" class="disabled"><span class="glyphicon glyphicon-check pull-right"></span>Section 1</a></li>
        <li role="presentation"><a href="vcp-application-2.html"><span class="glyphicon glyphicon-unchecked pull-right"></span>Section  2</a></li>
        <li role="presentation"><a href="vcp-application-3.html"><span class="glyphicon glyphicon-unchecked pull-right"></span>Section  3</a></li>
        <li role="presentation"><a href="vcp-application-4.html"><span class="glyphicon glyphicon-unchecked pull-right"></span>Section  4</a></li>
        <li role="presentation"><a href="vcp-application-5.html"><span class="glyphicon glyphicon-unchecked pull-right"></span>Section  5</a></li>
        <li role="presentation"><a href="vcp-application-6.html"><span class="glyphicon glyphicon-unchecked pull-right"></span>Section  6</a></li>
        <li role="presentation"><a href="vcp-application-7.html"><span class="glyphicon glyphicon-unchecked pull-right"></span>Section  7</a></li>
        <li role="presentation"><a href="vcp-application-8.html"><span class="glyphicon glyphicon-unchecked pull-right"></span>Section  8</a></li>
        <li role="presentation"><a href="vcp-application-9.html"><span class="glyphicon glyphicon-unchecked pull-right"></span>Section  9</a></li>
        <li role="presentation"><a href="vcp-application-10.html"><span class="glyphicon glyphicon-unchecked pull-right"></span>Section  10</a></li>
        <li role="presentation"><a href="vcp-application-11.html"><span class="glyphicon glyphicon-unchecked pull-right"></span>Section  11</a></li>
        <li role="presentation"><a href="vcp-application-12.html"><span class="glyphicon glyphicon-unchecked pull-right"></span>Section  12</a></li>
        <li role="presentation"><a href="vcp-application-13.html"><span class="glyphicon glyphicon-unchecked pull-right"></span>Section  13</a></li>
        <li role="presentation"><a href="vcp-application-Summary.html"><span class="glyphicon glyphicon-unchecked pull-right"></span>Summary</a></li>
      </ul>

      &nbsp;
    </div><!-- /Sidebar -->
    
    <!-- Main Content -->
    <div class="col-xs-12 col-lg-9 col-sm-9 col-md-9">
      <h4>Section 1 - Claimant</h4>

      <div class="alert alert-info" role="alert">
        <h4>A Separate application  must be filed for each person seeking assistance.</h4>
        <p>Section 1 must be completed for all applications. The claimant is the person who has expenses or is seeking assistance as a result of a crime. If you are filing this application on behalf of someone else, put their information in Section 1 and your information in Section 3.</p>
      </div>

      <form>
        <div class="row">
          <div class="col-lg-6 col-xs-12 col-sm-6">
            <div class="form-group">
              <label for="exampleInputEmail1">First Name</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="First Name">
            </div>
          </div>
          
          <div class="col-lg-offset-0 col-lg-6 col-xs-12 col-sm-6">
            <div class="form-group">
              <label for="exampleInputEmail1">Middle Name</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Middle Name">
            </div>
          </div>

          <div class="col-lg-offset-0 col-lg-6 col-xs-12 col-sm-6">
            <div class="form-group">
              <label for="exampleInputEmail1">Last Name</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Last Name">
            </div>
          </div>

          <div class="col-lg-offset-0 col-lg-3 col-xs-12 col-sm-6">
            <div class="form-group">
              <label for="Gender" class="select">Gender</label>
              <select class="form-control">
                  <option>Male</option>
                  <option>Female</option> 
                </select>
            </div>
          </div>

          <div class="col-lg-offset-0 col-lg-3 col-xs-12 col-sm-12">
            <div class="form-group">
              <label for="Gender" class="select">Relationship to victim</label>
              <select class="form-control">
                  <option>Self</option>
                  <option>Family Member that Witnessed the Crime</option> 
                  <option>Other</option> 
                </select>
            </div>
          </div>

          <div class="col-lg-offset-0 col-lg-6 col-xs-12 col-sm-12">
            <div class="form-group">
              <label for="Gender" class="select">Does the claimant have a Social Security Number?</label>
              <select class="form-control">
                  <option>Yes</option>
                  <option>No</option> 
                </select>
            </div>
          </div>

          <div class="col-lg-offset-0 col-lg-3 col-xs-12 col-sm-6">
            <div class="form-group">
              <label for="exampleInputEmail1">Social Security #</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="SS#">
            </div>
          </div>

          <div class="col-lg-offset-0 col-lg-3 col-xs-12 col-sm-6">
            <div class="form-group">
              <label for="exampleInputEmail1">Date of Birth</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Date of Birth">
            </div>
          </div>

          <div class="col-lg-offset-0 col-lg-6 col-xs-12">
            <div class="form-group">
              <label for="exampleInputEmail1">Mailing Address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Street Number and Name or P.O. Box">
            </div>
          </div>

          <div class="col-lg-offset-0 col-lg-6 col-xs-12 col-sm-12">
            <div class="form-group">
              <label for="exampleInputEmail1">Address 2</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Apartment or Unit #">
            </div>
          </div>

          <div class="col-lg-offset-0 col-lg-4 col-xs-12 col-sm-6">
            <div class="form-group">
              <label for="exampleInputEmail1">City</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Sacramento">
            </div>
          </div>

          <div class="col-lg-offset-0 col-lg-2 col-xs-12 col-sm-6">
            <div class="form-group">
              <label for="exampleInputEmail1">State</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="CA">
            </div>
          </div>

          <div class="col-lg-offset-0 col-lg-6 col-xs-12 col-sm-6">
            <div class="form-group">
              <label for="exampleInputEmail1">Zip</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="95822">
            </div>
          </div>

          <div class="col-lg-offset-0 col-lg-6 col-xs-12 col-sm-6">
            <div class="form-group">
              <label for="exampleInputEmail1">Home Telephone</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="(916) 345-6783">
            </div>
          </div>

          <div class="col-lg-offset-0 col-lg-6 col-xs-12 col-sm-6">
            <div class="form-group">
              <label for="exampleInputEmail1">Work Telephone</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="(916) 345-0000 x123">
            </div>
          </div>

          <div class="col-lg-offset-0 col-lg-6 col-xs-12 col-sm-6">
            <div class="form-group">
              <label for="exampleInputEmail1">Cell Phone</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="(916) 345-2345">
            </div>
          </div>

          <div class="col-lg-offset-0 col-lg-4 col-xs-12 col-sm-6">
            <div class="form-group">
              <label for="exampleInputEmail1">E-Mail</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="andrey@mylife.com">
            </div>
          </div>

          <div class="col-lg-offset-0 col-lg-2 col-xs-12 col-sm-6">
            <div class="form-group">
              <label for="Gender" class="select">E-Mail Type</label>
              <select class="form-control">
                  <option>Personal</option>
                  <option>Work</option> 
                </select>
            </div>
          </div>

          <div class="col-lg-offset-0 col-lg-12 col-xs-12">
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">
                From the date of the crime to now, has the claimant been in prison, on probation, on parole or post-release community supervision because of a felony? </label>
            </div>
          </div>

          <div class="col-lg-offset-0 col-lg-12 col-xs-12">
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">
                Is the claimant required to register as a sex offender?
              </label>
            </div>
          </div>
        

        
          <div class="bg-warning col-lg-offset-0 col-lg-12 col-xs-12">
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">
                Check This Box if You Are a Parent/Guardian Applying on Behalf of a Minor Witness to Violent Crime. Minor witnesses are eligible for mental health treatment only. Claimant is under age 18, a witness in close proximity to a violent crime, but is neither the crime victim nor related to the victim. Provide available victim, crime or other information in remaining sections. 
              </label>
            </div>
          </div>
          
          <div class="col-lg-offset-0 col-lg-12 col-xs-12"> 
            <br><br>
              <span class="glyphicon glyphicon-info-sign"></span>               
                If you are an adult victim and the expenses are for you, skip to <a href="vcp-application-4.html">Section 4</a>. If not, Continue to Section 2
          </div>
        
        </div><!--/ Row-->
        
        <hr>

        <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#exitApplication"> Exit</button>

        <!-- Exit (Are you sure?) Modal -->
        <div class="modal fade" id="exitApplication" tabindex="-1" role="dialog" aria-labelledby="exitApplication">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Before you exit</h4>
              </div>
              <div class="modal-body">
                Do you want to save this application for later?
              </div>
              <div class="modal-footer">
                <a href="vcp.html" role="button" class="btn btn-default btn-large">Don't save</a>
                <a href="vcp.html" role="button" class="btn btn-success btn-large">Save</a>
              </div>
            </div>
          </div>
        </div><!-- /Exit (Are you sure?) Modal -->


        <div class="pull-right">
          <a href="vcp-application-2.html" role="button" class="btn btn-primary btn-large">Next</a>
        </div>
      </form>

    </div> <!-- /Main Content -->
    <br />
    <br />
  </div>
  <br />
  <br />
  <br />
  <hr>
  <div class="row">
    <div class="text-center col-md-6 col-md-offset-3">
      <h4>California Victims Compensation Program</h4>
      <p>Copyright &copy; 2016 &middot; All Rights Reserved &middot; <a href="www.calvcp.ca.gov">calvcp.ca.gov</a></p>
    </div>
  </div>
  <hr>
</div>
.header-logo{
  padding: 10px;
  width: 100px;
}
$( "#progress-button" ).click(function() {
  $("#progress-menu").toggleClass('hidden-xs');
 });

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js