Make wider input - html

Question

I'm using Bootstrap 3.2.0 and I have the following code:
<form name="singUpForm" id="singUpForm">
<div class="top-margin">
<div class="input-append">
<label>Contact<span class="text-danger"></span></label>
<input type="url" class="span2" ng-model="Person.url" required="required">
<button class="btn" type="button">
Test
</button>
<button class="btn" type="button">
Ayuda
</button>
</div>
<div class="alert alert-warning" ng-hide='singUpForm.email.$valid' >
Ingrese una url válida.
</div>
</div>
<div class="row">
<div class="col-lg-4 text-right">
<button ng-disabled='singUpForm.$invalid' type="submit" class="btn btn-action" ng-click="signUp()">
Guardar datos
</button>
</div>
</div>
</form>
I want to make the input type="url" wider traying to force it to get the 100% of the space inside the form with the two buttons on the right on the same line.
I need something like that:

Answer 1

Use 'form-control' , 'row' and 'col'
In 'xs' screen you can change the class as 'col-xs-6' in both columns
UPDATED DEMO
<div class="input-append">
<label>Contact<span class="text-danger"></span></label>
<div class="row">
<div class="col-md-10 col-sm-9 col-xs-12 col-lg-10">
<input type="url" class="form-control" ng-model="Person.url" required="required" />
</div>
<div class="col-md-2 col-sm-3 col-xs-12 col-lg-2">
<button class="btn" type="button">
Test
</button>
<button class="btn" type="button">
Ayuda
</button>
</div>
</div>
</div>

Answer 2

You can set the input attribute to a specific size <input size="100">.

Answer 3

You can apply:
style="width:100%"
in the <input> field, so it's like:
<input type="url" class="span2" ng-model="Person.url" required="required" style="width:100%">
Or you can add it in the CSS:
.span2{
width: 100%
}
http://jsfiddle.net/sc212f7s/