CODEWITHSUNDEEP
csstwitter-bootstrap-3
DDTPritesh
DDTPritesh

Reputation: 23

align bootstrap form group elements to 50% right using css

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.

Upvotes: 0

Views: 814

Answers (2)

Par Tha
Par Tha

Reputation: 1531

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>

Upvotes: 1

Anmol Juneja
Anmol Juneja

Reputation: 325

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

Upvotes: 2

Related Questions