Nesting Bootstrap input boxes side by side - css

Question

I have two input boxes that I am trying to get side by side on the row but I'd like there still to be a gap between the boxes but flush to the sides of the container.
Is there a way using just Bootstrap to do this? The container is a replication of a mobile device.
<div class="group col-sm-12">
<div class="row">
<div class="col-sm-6">
<div class="row">
<input type="text" name="first-name" ng-model="user.firstname" />
</div>
</div>
<div class="col-sm-6">
<div class="row">
<input type="text" name="last-name" ng-model="user.surname" />
</div>
</div>
</div>
</div>
plunkr example

Answer 1

Bootstrap has a few different grid classes. col-<size>-<num> where <size> can be xs, sm, md, or lg, and <num> can be an integer between (and including) 1-12.
For mobile devices, you'll want to use xs. If you don't specify any of the larger sizes, then they'll use the same widths as the smaller one. If you change col-sm-12 to col-xs-12 and col-sm-6 to col-xs-6 I think you'll get the result you're looking for.
It also helps your inputs look more consistent and more easily themed if you give them the form-control class.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="group col-xs-12">
<div class="row">
<div class="col-xs-6">
<div class="row">
<input class="form-control" type="text" name="first-name" />
</div>
</div>
<div class="col-xs-6">
<div class="row">
<input class="form-control" type="text" name="last-name" />
</div>
</div>
</div>
</div>

Answer 2

I'm not familiar with Bootstrap, but one way to achieve it would be to add this to your CSS:
.col-sm-6, .col-sm-6 .row, .col-sm-6 .row input {
display: inline-block;
}

Answer 3

I am not sure if I understand your question correctly. You need a space between the text box side by side right? if so try this code. You could also use col-xs-offset-1 for space between grid. This will allow you to push 1 grid away. example http://www.bootply.com/U6vlrIktq2
<div class="col-md-4">
<input type="text" class="form-control">
</div>
<div class="col-md-4 ">
<input type="text" class="form-control"><br>
</div>
<!-- for more spacing between boxes-->
<div class="col-xs-5">
<input type="text" class="form-control">
</div>
<div class="col-xs-5 col-xs-offset-1">
<input type="text" class="form-control">
</div>