align bootstrap form group elements to 50% right using css - css

Question

We need to make some of the form elements on right side with width 50%. We are getting complete bootstrap 3 form via some api request so we can't change the structure of the form. It is standard bootstrap 3 form. In the below example, we want to move only last field to right side with width 50%
of total form width.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
// this needs to move right with width 50% including the label
<div class="form-group">
<label for="fieldtoBeright">Right Field</label>
<input type="text" class="form-control" id="fieldtoBeright" placeholder="Right field">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
We have tried applying css but either all elements are moving on the right side or label is not moving but field is correctly moved. Please help in this.

Answer 1

Simply Add class {col-sm-offset-6}. Shifts 50% only in tabs and desktop for mobile also then add class {col-xs-offset-6}.

Answer 2

Try this
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div>
<form class="row">
<div class="col-xs-6 col-xs-offset-6">
<div class="form-group col-xs-12">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group col-xs-12">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group col-xs-12">
<label for="fieldtoBeright">Right Field</label>
<input type="text" class="form-control" id="fieldtoBeright" placeholder="Right field">
</div>
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>