Reputation: 509

horizontal form with inline form bootstrap while keeping everything aligned

I am trying to do an in-line form for the 123 456 789 and price fields while keeping all first label is always taking col-md-1 space and in-line with other labels.

Here is the codepen http://codepen.io/anon/pen/pEYYEj

Here is the code

<!-- Latest compiled and minified CSS & JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10" style="padding: 30px 20px 20px;
    border: 1px solid #ddd;
    background: #fff;">


    <form data-toggle="validator" method="POST" enctype="multipart/form-data" action="/seller/new-listings" class="form-horizontal" novalidate="true">
        <div class="form-group">
            <label class="col-md-1 control-label">Name:</label>
            <div class="col-md-11">


                <input class="maxlength-handler   form-control input-xlarge" data-error="Min 2 Letters" data-minlength="2" id="name" label="False" maxlength="56" name="name" required="" type="text" value="">
                <div class="help-block with-errors"></div>
            </div>
        </div>



    <div class="form-group">
        <label class="col-md-1 control-label">Description:</label>
        <div class="col-md-11">
            <textarea class="maxlength-handler   form-control input-xlarge" data-error="Min 20 Letters" data-minlength="20" id="description" label="False" maxlength="300" name="description" required="" style="height:100px;"></textarea>

            <div class="help-block with-errors"></div>
        </div>
    </div>


    <div class="form-group">
        <label class="col-md-1 control-label">123:</label>
        <div class="col-md-11">
            <input class="123-input form-control" id="123" maxlength="4" name="123" style=" width:80px; display:inline-block; " type="text" value="0">
            <div class="help-block with-errors"></div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-1 control-label">456:</label>
        <div class="col-md-11">
            <input class="cbn-input form-control" id="" maxlength="4" name="" style="   width:80px; display:inline-block; " type="text" value="0">
            <div class="help-block with-errors"></div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-1 control-label">678:</label>
        <div class="col-md-11">
            <input class="cbn-input form-control" id="" maxlength="4" name="" style="   width:80px; display:inline-block; " type="text" value="0">
            <div class="help-block with-errors"></div>
        </div>
    </div>







    <div class="form-group">
        <label class="col-md-1 control-label">Price:</label>
        <div class="col-md-11">
            <label class="control-label" style="padding-right:5px;">1g </label>
            <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
            <div class="help-block with-errors"></div>
        </div>
    </div>


    <div class="form-group">
        <label class="col-md-1 control-label">Price:</label>
        <div class="col-md-11">
            <label class="control-label" style="padding-right:5px;">1g </label>
            <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-md-1 control-label">Price:</label>
        <div class="col-md-11">
            <label class="control-label" style="padding-right:5px;">1/8 </label>
            <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-md-1 control-label">Price:</label>
        <div class="col-md-11">
            <label class="control-label" style="padding-right:5px;">1/4 </label>
            <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-md-1 control-label">Price:</label>
        <div class="col-md-11">
            <label class="control-label" style="padding-right:5px;">1/2 </label>
            <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-md-1 control-label">Price:</label>
        <div class="col-md-11">
            <label class="control-label" style="padding-right:5px;">1 oz </label>
            <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
            <div class="help-block with-errors"></div>
        </div>
    </div>


    <div class="col-md-1"></div>
    <div class="form-group">
        <br>
    </div>
    <div class="form-group">
        <label class="col-md-1 control-label">Stock:</label>
        <div class="col-md-11">
            <input class="form-control only-numbers" data-error="Stock required" data-minlength="1" id="stock" maxlength="3" name="stock" placeholder="Total Available Inventory for sale measured by Gram" required="" type="text" value="">
            <div class="help-block with-errors"></div>
        </div>
    </div>




    <div class="form-group">
        <label class="col-md-1 control-label">Published:</label>
        <div class="col-md-11"><select class="form-control" id="published" name="published"><option value="published">Published</option><option value="not_published">Unpublished</option></select></div>
    </div>
    <div class="form-group">
        <label class="col-md-1 control-label">SKU:</label>
        <div class="col-md-11"><input class="form-control" id="sku" name="sku" type="text" value=""></div>
    </div>
    </form>
    </div>

Upvotes: 0

Answers (2)

Mamdouh Saeed

Reputation: 2324

.inline-inp,.inline-inp .col-md-1,.inline-inp .col-md-11{
display:inline-block;
}

<!-- Latest compiled and minified CSS & JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10" style="padding: 30px 20px 20px;
    border: 1px solid #ddd;
    background: #fff;">


    <form data-toggle="validator" method="POST" enctype="multipart/form-data" action="/seller/new-listings" class="form-horizontal" novalidate="true">
        <div class="form-group">
            <label class="col-md-1 control-label">Name:</label>
            <div class="col-md-11">


                <input class="maxlength-handler   form-control input-xlarge" data-error="Min 2 Letters" data-minlength="2" id="name" label="False" maxlength="56" name="name" required="" type="text" value="">
                <div class="help-block with-errors"></div>
            </div>
        </div>



    <div class="form-group">
        <label class="col-md-1 control-label">Description:</label>
        <div class="col-md-11">
            <textarea class="maxlength-handler   form-control input-xlarge" data-error="Min 20 Letters" data-minlength="20" id="description" label="False" maxlength="300" name="description" required="" style="height:100px;"></textarea>

            <div class="help-block with-errors"></div>
        </div>
    </div>

<div>

    <div class="form-group inline-inp">
        <label class="col-md-1 control-label">123:</label>
        <div class="col-md-11">
            <input class="123-input form-control" id="123" maxlength="4" name="123" style=" width:80px; display:inline-block; " type="text" value="0">
            <div class="help-block with-errors"></div>
        </div>
    </div>
    <div class="form-group inline-inp">
        <label class="col-md-1 control-label">456:</label>
        <div class="col-md-11">
            <input class="cbn-input form-control" id="" maxlength="4" name="" style="   width:80px; display:inline-block; " type="text" value="0">
            <div class="help-block with-errors"></div>
        </div>
    </div>
    <div class="form-group inline-inp">
        <label class="col-md-1 control-label">678:</label>
        <div class="col-md-11">
            <input class="cbn-input form-control" id="" maxlength="4" name="" style="   width:80px; display:inline-block; " type="text" value="0">
            <div class="help-block with-errors"></div>
        </div>
    </div>


</div>

<div>


    <div class="form-group inline-inp">
        <label class="col-md-1 control-label">Price:</label>
        <div class="col-md-11">
            <label class="control-label" style="padding-right:5px;">1g </label>
            <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
            <div class="help-block with-errors"></div>
        </div>
    </div>


    <div class="form-group inline-inp">
        <label class="col-md-1 control-label">Price:</label>
        <div class="col-md-11">
            <label class="control-label" style="padding-right:5px;">1g </label>
            <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group inline-inp">
        <label class="col-md-1 control-label">Price:</label>
        <div class="col-md-11">
            <label class="control-label" style="padding-right:5px;">1/8 </label>
            <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group inline-inp">
        <label class="col-md-1 control-label">Price:</label>
        <div class="col-md-11">
            <label class="control-label" style="padding-right:5px;">1/4 </label>
            <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group inline-inp">
        <label class="col-md-1 control-label">Price:</label>
        <div class="col-md-11">
            <label class="control-label" style="padding-right:5px;">1/2 </label>
            <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group inline-inp">
        <label class="col-md-1 control-label">Price:</label>
        <div class="col-md-11">
            <label class="control-label" style="padding-right:5px;">1 oz </label>
            <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
            <div class="help-block with-errors"></div>
        </div>
    </div>


</div>


    <div class="col-md-1"></div>
    <div class="form-group">
        <br>
    </div>
    <div class="form-group">
        <label class="col-md-1 control-label">Stock:</label>
        <div class="col-md-11">
            <input class="form-control only-numbers" data-error="Stock required" data-minlength="1" id="stock" maxlength="3" name="stock" placeholder="Total Available Inventory for sale measured by Gram" required="" type="text" value="">
            <div class="help-block with-errors"></div>
        </div>
    </div>




    <div class="form-group">
        <label class="col-md-1 control-label">Published:</label>
        <div class="col-md-11"><select class="form-control" id="published" name="published"><option value="published">Published</option><option value="not_published">Unpublished</option></select></div>
    </div>
    <div class="form-group">
        <label class="col-md-1 control-label">SKU:</label>
        <div class="col-md-11"><input class="form-control" id="sku" name="sku" type="text" value=""></div>
    </div>
    </form>
    </div>

Upvotes: 1

Rik Heywood

Reputation: 13972

Not quite sure if this is what you were looking for, but if you drop some of the form-groups and change the field divs to col-md-1 too, then you get the fields you want inlined...

http://codepen.io/anon/pen/pEYYdb

<div class="form-group">
    <label class="col-md-1 control-label">123:</label>
    <div class="col-md-1">
        <input class="123-input form-control" id="123" maxlength="4" name="123" style=" width:80px; display:inline-block; " type="text" value="0">
        <div class="help-block with-errors"></div>
    </div>

    <label class="col-md-1 control-label">456:</label>
    <div class="col-md-1">
        <input class="cbn-input form-control" id="" maxlength="4" name="" style="   width:80px; display:inline-block; " type="text" value="0">
        <div class="help-block with-errors"></div>
    </div>

    <label class="col-md-1 control-label">678:</label>
    <div class="col-md-1">
        <input class="cbn-input form-control" id="" maxlength="4" name="" style="   width:80px; display:inline-block; " type="text" value="0">
        <div class="help-block with-errors"></div>
    </div>
</div>

Upvotes: 1

horizontal form with inline form bootstrap while keeping everything aligned

Answers (2)

Related Questions