Bootstrap: Horizontal Fields Inside Vertical Form

Bootstrap : horizontal fields inside vertical form

You can leverage Bootstrap's existing classes (checkbox.inline)to get the effect you're looking for. The key to making it look right is to specify padding-left: 0px; on the labels:

  <div class="control-group">
    <div class="controls">
      <label class="checkbox inline" style="padding-left: 0px;" for="inputColor">Favorite Color <input type="text" id="inputColor" class="span2" /></label>
      <label class="checkbox inline" style="padding-left: 0px;" for="inputNColor">Next Color <input type="text" id="inputNColor" class="span2" /></label>
    </div>
  </div>

Please see http://jsfiddle.net/jhfrench/Hzucn/ for a working example.

I tried to create a new class for you (along the lines of .controls-row label.inline { padding-left: 0px;} so you wouldn't have to do styling on the element, but it caused more conflicts than I anticipated. So if you're going to use this solution pervasively, you might want to invest the time in untangling that...

Bootstrap 4 - can't horizontally align a vertical form

The form is horizontally centered, but it's only half the width of it's parent. The issue is...

"And by specifying the form rows to add up to 6-columns (2-column
labels and 4-column inputs), the form would fill the 6-column content
area, thereby automatically centering itself"

Since 6 is half of 12, the form col-6 (2+4) is only going to fill half the parent col-6. If you want a narrower form in the middle use col-4 (1/3 width), and then something that adds to 12 for the labels and form input (eg. 3+9). OFC you could also use 4/8, 6/6, etc...

<div class="container-fluid">
    <div class="row">
        <div class="my-4 offset-4 col-4 justify-content-center align-items-center">
            <form action="/some/path" method="post">
                <div class="form-group row">
                    <label for="username" class="col-3 col-form-label">Username</label>
                    <div class="col-9">
                        <input type="text" class="form-control" id="username" name="_username" required="required" autocomplete="username">
                    </div>
                </div>

                <div class="form-group row">
                    <label for="password" class="col-3 col-form-label">Password</label>
                    <div class="col-9">
                        <input type="password" class="form-control" id="password" name="_password" required="required" autocomplete="current-password">
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-3"></div>
                    <div class="col-9">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="remember_me" name="_remember_me" value="on">
                            <label for="remember_me" class="form-check-label">Remember me</label>
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-12">
                        <button class="btn btn-burnt-orange" type="submit" id="_submit" name="_submit">Log in</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

https://www.codeply.com/go/b4FE5qflxS

Related: Center the content inside a column in Bootstrap 4

How to mix vertical and horizontal form elements in one form in Bootstrap 3?

You don't have to use form-horizontal -class on a <form> element. Instead use a <div> and wrap all of the fields inside one <form> like this: http://www.bootply.com/hxs0IhA1wV

Create bootstrap form having horizontal and vertical form field

Wrap your input fields in a div and assign a col-sm-x class to it e.g:

<div class="form-group">
    <label class="col-sm-3 control-label" for="cardNumber">Card # (required)</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="cardNumber" size="12" autocomplete='off'>
    </div>
</div>

Also add a col-sm-x to your labels

For columns:

<div class="form-group">
    <label class="col-sm-3 control-label">Expiry date(MM/YYYY) (required)</label>
    <div class="col-sm-2">
        <input type="text" class="form-control" placeholder="MM" size="2" autocomplete='off'>
    </div>
    <div class="col-sm-2">
        <input type="text" class="form-control" placeholder="YYYY" size="4" autocomplete='off'>
    </div>
</div>

Finally, class of form should be form-horizontal Play with the col width as you like

How to place some fields horizontal while others vertical inside a bootstrap form

HTML

<div class="container-fluid">
    <form class="form" role="form">        
        <div class="form-group">
            <div class="row">
                <div class="col-sm-6 col-md-6 col-xs-6">
                    <input type="text" class="form-control" placeholder="Field 1" />
                </div>
                <div class="col-sm-6 col-md-6 col-xs-6">
                    <input type="text" class="form-control" placeholder="Field 2" />
                </div>
            </div>
        </div>
                <div class="form-group text-center">
            <div class="row">
                <input type="button" class="btn btn-primary" id="continueproductdetailsbutton" value="Continue" />
            </div>
        </div>
    </form>
</div>

working fiddle
http://jsfiddle.net/r30kk8m4/1/

Update
You can make you buttons responsive

@media (max-width: 768px) {
  .btn-responsive {
    padding:2px 4px;
    font-size:80%;
    line-height: 1;
    border-radius:3px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .btn-responsive {
    padding:4px 9px;
    font-size:90%;
    line-height: 1.2;
  }
}

Bootstrap Horizontal Form not vertical

Reduce the parent container class to col-sm-3 and increase the child container's class to be col-sm-12.

So the parent container will have 25% width while the child containers will occupy the full width(100%) of the parent.

Readjust the centering of the form by modifying the offset-* classes.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/><div class="container">    <div class="col-sm-3 col-sm-offset-4">        <form role="form" ng-submit="submit()" ng-controller="formCtrl">            <div class="col-sm-12 form-group">                <input type="email" data-ng-model="form.email" placeholder="your@email.here" class="form-control">            </div>            <div class="col-sm-12 form-group">                <input type="password" data-ng-model="form.password" placeholder="password" class="form-control">            </div>            <div class="col-sm-4 form-group">                <button type="submit" class="btn btn-success">sign in</button>            </div>        </form>        <div id="messages"></div>    </div></div>

<div class="row">
  <div class="col-sm-6">
    <div class="form-group">
      <label for="inputName">Name:</label>
      <input type="text" class="form-control" id="inputName" placeholder="Enter your name here" value="Leandro">
    </div>
  </div>
  <div class="col-sm-6">
    <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="Faria">
    </div>
  </div>
</div>

<!-- 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 class="container"> <form>  <div class="row" id="row1">   <fieldset>    <div class="row" id="main">     <div class="col-md-1">      <button class="form-control" id="1" class="remove_product" type="button">       <i class="fa fa-trash"></i>      </button>     </div>     <div class="col-md-2">      <input type="text" class="form-control" placeholder="Variation">     </div>     <div class="col-md-2">      <input type="text" class="form-control" placeholder="Unit Price">     </div>     <div class="col-md-2"></div>     <div class="col-md-2">      <button class="form-control" id="1" class="add_serial" type="button">       Add Serials      </button>     </div>     <div class="col-md-3">      <div class="col-md-10">       <input class="form-control " type="text" name="mytext[]" placeholder="Serial Here">      </div>      <div class="col-md-1">       <a class="form-control remove_field" href="#"> D </a>      </div>     </div>    </div>    <div class="row" id="sub1">     <div class="col-md-3 pull-right">      <div class="col-md-10">       <input class="form-control " type="text" name="mytext[]" placeholder="Serial Here">      </div>      <div class="col-md-1">       <a class="form-control remove_field" href="#"> D </a>      </div>     </div>    </div>    <div class="row" id="sub1">     <div class="col-md-3 pull-right">      <div class="col-md-10">       <input class="form-control " type="text" name="mytext[]" placeholder="Serial Here">      </div>      <div class="col-md-1">       <a class="form-control remove_field" href="#"> D </a>      </div>     </div>    </div>   </fieldset>  </div> </form></div>

<div class="row">
  <div class="col-md-8">
    <div class="row">
        <div class="col-md-3">
            Left side for labes
        </div>
        <div class="col-md-9">
            Right side for forms
            <div class="row">
                <div class="col-md-12">
                    longer forms
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    shorter forms
                </div>
                <div class="col-md-3">
                    shorter forms
                </div>
                <div class="col-md-3">
                    shorter forms
                </div>
                <div class="col-md-3">
                    shorter forms
                </div>
            </div>
        </div>
    </div>
  </div>
  <div class="col-md-4">
    Right panel with instructions
  </div>
</div>