Resize small forms on large pages

I have this user profile form which is pretty small.

The point is: the form/fields should be small but the page is huge. I don't need this fields occupying the whole page.

So what I wanted to do is to make the fields smaller.

The current structure is 2/12 to the menu and 10/12 to the form.

One way I could do it is to simply put the form inside of a smaller column , such as 4/12 or 5/12. But the problem is when the page is resized to a smartphone for instance the form should occupy the whole page again, like 10/12.

Where's the page:

Where's the code:

<div class="row">

        <div class="col-md-12">

          <div class="row">

            <div class="col-md-2">

              <ul class="list-group">
                <a href="#" class="list-group-item"><strong>Profile</strong></a>
                <a href="my-account-password.html" class="list-group-item">Password</a>
              </ul>

            </div> <!--/col-md-2-->

            <div class="col-md-10">

              <form>
                <div class="form-group">
                  <label for="inputName">Name:</label>
                  <input type="text" class="form-control" id="inputName" placeholder="Enter your name here" value="Wile E.">
                </div>
                <div class="form-group">
                  <label for="inputLastName">Last Name:</label>
                  <input type="text" class="form-control" id="inputLastName" placeholder="Enter your last name here" value="Coyote">
                </div>
                <div class="form-group">
                  <label for="inputTitle">Title:</label>
                  <input type="text" class="form-control" id="inputTitle" placeholder="Enter your title here" value="CEO">
                </div>
                <div class="form-group">
                  <label for="inputEmail">Email:</label>
                  <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email here" value="wilie@acmecorp.com">
                </div>
                <div class="form-group bottom-buffer">
                  <label for="selectEmail">Notifications:</label>
                  <select class="form-control" id="selectEmailNotifications">
                    <option>None</option>
                    <option>Daily</option>
                    <option>Weekly</option>
                    <option selected>Monthly</option>
                  </select>
                  <p class="help-block">Receive email notifications with all the most important metrics of your business.</p>
                </div>
                <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>Save Changes</button>
              </form>

            </div> <!--/col-md-10-->

          </div><!--/row -->

        </div><!--col-md-12-->

      </div><!--/row-->