locked
bootstrap horizontal form design please help RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1355965324 posted

    Please can  you help to design a bootstrap horizontal form the way given below. I tried all the possible ways but when I resize the screen all text box and label is overlapped with another. When I shrink the page into small , then all the text box would be misplaced to another label and the user cannot understand which textbox is related which label. Please help  to create the bootstrap html page.   the  doted line -------------- is actually textbox

    Depot          -----------------------                                     Department  -----------------                                      Employee  ---------------------------

    Customer   ------------------------------------------                    Year    ------------          Month        --------------------------

    Date Goods Invoiced ------------              Date Work was Carried Out  ---------------   Break Down Book No --------------  Invoice No --------------

    Time Job Start -----------              Time Job Finish -----------          IsOvertime  <Checkbox>       Callout charge -----------------

    Friday, July 19, 2019 6:28 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User839733648 posted

    Hi polachan,

    You may refer to the following sample, the key point is to use form-horizontal, form-group and grid class.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <form class="form-horizontal">
        <div class="row">
            <div class="form-group">
                <label for="lblDepot" class="control-label col-sm-1">Depot</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="lblDepot">
                </div>
                <label for="lblDepartment" class="control-label col-sm-1 ">Department</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="lblDepartment">
                </div>
                <label for="lblEmployee" class="control-label col-sm-1">Employee</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="lblEmployee">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <label for="lblCustomer" class="control-label col-sm-1">Customer</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="lblCustomer">
                </div>
                <label for="lblYear" class="control-label col-sm-1 ">Year</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="lblYear">
                </div>
                <label for="lblMonth" class="control-label col-sm-1 ">Month</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="lblMonth">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <label for="lblDGI" class="control-label col-sm-1">Date Goods Invoiced</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="lblDGI">
                </div>
                <label for="lblDWCO" class="control-label col-sm-1">Date Work was Carried Out</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="lblDWCO">
                </div>
                <label for="lblBDBN" class="control-label col-sm-1">Break Down Book No</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="lblBDBN">
                </div>
                <label for="lblLN" class="control-label col-sm-1">Invoice No</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="lblLN">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <label for="lblTJS" class="control-label col-sm-1">Time Job Start</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="lblTJS">
                </div>
                <label for="lblTJF" class="control-label col-sm-1">Time Job Finish</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="lblTJF">
                </div>
                <div class="col-sm-3">
                    <div class="checkbox-inline">
                        <label><input type="checkbox" />IsOvertime</label>
                    </div>
                </div>
                <label for="lblCC" class="control-label col-sm-1">Callout charge</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="lblCC">
                </div>
            </div>
        </div>

    </form>

</body>
</html>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 19, 2019 8:31 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1038772411 posted

    Hi, polachan

    Creating a horizontal form layout :

    You can also create horizontal form layouts where labels and form controls are aligned side-by-side using the Bootstrap grid classes. To create a horizontal form layout add the class .row on form groups and use the .col-*-* grid classes to specify the width of your labels and controls.

    Also, be sure to apply the class .col-form-label on the <label> elements, so that they're vertically centered with their associated form controls. Let's check out an example:

    <form>
    <div class="form-group row">
        <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
    </div>
    <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10 offset-sm-2">
            <label class="form-check-label"><input type="checkbox"> Remember me</label>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10 offset-sm-2">
            <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
    </div>
</form>

    For diffrence layout and more undertanding regarding this kindly refer once below link :

    https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

    Thanks.

    Friday, July 19, 2019 6:48 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User839733648 posted

    Hi polachan,

    You may refer to the following sample, the key point is to use form-horizontal, form-group and grid class.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <form class="form-horizontal">
        <div class="row">
            <div class="form-group">
                <label for="lblDepot" class="control-label col-sm-1">Depot</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="lblDepot">
                </div>
                <label for="lblDepartment" class="control-label col-sm-1 ">Department</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="lblDepartment">
                </div>
                <label for="lblEmployee" class="control-label col-sm-1">Employee</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="lblEmployee">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <label for="lblCustomer" class="control-label col-sm-1">Customer</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="lblCustomer">
                </div>
                <label for="lblYear" class="control-label col-sm-1 ">Year</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="lblYear">
                </div>
                <label for="lblMonth" class="control-label col-sm-1 ">Month</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="lblMonth">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <label for="lblDGI" class="control-label col-sm-1">Date Goods Invoiced</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="lblDGI">
                </div>
                <label for="lblDWCO" class="control-label col-sm-1">Date Work was Carried Out</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="lblDWCO">
                </div>
                <label for="lblBDBN" class="control-label col-sm-1">Break Down Book No</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="lblBDBN">
                </div>
                <label for="lblLN" class="control-label col-sm-1">Invoice No</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="lblLN">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <label for="lblTJS" class="control-label col-sm-1">Time Job Start</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="lblTJS">
                </div>
                <label for="lblTJF" class="control-label col-sm-1">Time Job Finish</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="lblTJF">
                </div>
                <div class="col-sm-3">
                    <div class="checkbox-inline">
                        <label><input type="checkbox" />IsOvertime</label>
                    </div>
                </div>
                <label for="lblCC" class="control-label col-sm-1">Callout charge</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="lblCC">
                </div>
            </div>
        </div>

    </form>

</body>
</html>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 19, 2019 8:31 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1355965324 posted

    Thanks Jenni

    But when I apply the code and  I  resize the screen some label is missing .

    Resize page

    My code given below

    <form id="BreakDownLogEntry"
          asp-controller="Employee"
          asp-action="BreakDownLogEntry"
          data-ajax="true"
          data-ajax-method="POST"
          data-ajax-mode="replace"
          data-ajax-update="#content"
          class="form-horizontal"
          role="form" data-parsley-validate novalidate>
        <div class="container-fluid shadow">
            <div class="row my-sticky-element" style="display: block;">
                <label class="control-label-left padding-left-twenty col-sm-6" for="field1">BREAK DOWN LOG ENTRY</label>
            </div>
            <hr style="margin-top:unset" />
            <div class="row">
                <div class="form-group">
                    <label for="lblDepot" class="control-label col-sm-1">Depot</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="lblDepot">
                    </div>
                    <label for="lblDepartment" class="control-label col-sm-1 ">Department</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="lblDepartment">
                    </div>
                    <label for="lblEmployee" class="control-label col-sm-1">Employee</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="lblEmployee">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label for="lblCustomer" class="control-label col-sm-1">Customer</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="lblCustomer">
                    </div>
                    <label for="lblYear" class="control-label col-sm-1 ">Year</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="lblYear">
                    </div>
                    <label for="lblMonth" class="control-label col-sm-1 ">Month</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="lblMonth">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label for="lblDGI" class="control-label col-sm-1">Date Goods Invoiced</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="lblDGI">
                    </div>
                    <label for="lblDWCO" class="control-label col-sm-1">Date Work was Carried Out</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="lblDWCO">
                    </div>
                    <label for="lblBDBN" class="control-label col-sm-1">Break Down Book No</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="lblBDBN">
                    </div>
                    <label for="lblLN" class="control-label col-sm-1">Invoice No</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="lblLN">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label for="lblTJS" class="control-label col-sm-1">Time Job Start</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="lblTJS">
                    </div>
                    <label for="lblTJF" class="control-label col-sm-1">Time Job Finish</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="lblTJF">
                    </div>
                    <div class="col-sm-3">
                        <div class="checkbox-inline">
                            <label><input type="checkbox" />IsOvertime</label>
                        </div>
                    </div>
                    <label for="lblCC" class="control-label col-sm-1">Callout charge</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="lblCC">
                    </div>
                </div>
            </div>





        </div>

    </form>

    Friday, July 19, 2019 9:04 AM