Resize small forms on large pages - html

Question

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">
<strong>Profile</strong>
Password
</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-->

Answer 1

If you want to resize it in small screens, You should use col-xs (extra small devices and phones (<768px)) and col-sm (small devices and tablets (≥768px)) classes. And If you don't want your form to cover whole the page horizontally, you can also use col-..-offset-.. class for giving margin to your form.
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-2">
<ul class="list-group">
<strong>Profile</strong>
Password
</ul>
</div> <!--/col-md-2 col-sm-2 col-xs-2-->
<div class="col-md-6 col-md-offset-2 col-sm-6 col-sm-offset-2 col-xs-6 col-xs-offset-2">
<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-6 col-md-offset-2 col-sm-6 col-sm-offset-2 col-xs-6 col-xs-offset-2-->
</div><!--/row -->
</div><!--col-md-12 col-sm-12 col-xs-12-->
</div><!--/row-->

Answer 2

If You are using the bootstrap Framework you can define the behavior of The col- div using col-xs for mobile, col-sm for portrait tablet and col-md for landscape tablet. See http://getbootstrap.com/css/#grid
If you feel limited by the default definition you Can also extend the grid system writing more specific media queries, e.g. for xxl screen