locked
to show the three column a row in bootstrap responsive, Please help RRS feed

  • Question

  • User-1355965324 posted

    I am trying to show the the following three column <Date from > <Date To>  <Description for Time Off >  in the same row on form group.  But it is not coming in the same line for large screen when I run the program . How can I present the three column in the same row as bootstrap responsive The code O have given below

    <div class="row">
    <form asp-controller="Home"
    asp-action="HolidayAllocation"
    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">HOLIDAY ALLOCATION </label> </div> <hr style="margin-top:unset"> <div class="row"> <div class="col-sm-4 col-md-4"> <div class="form-group"> <label class="control-label control-label-left col-sm-2" for="field2"> Depot</label> <div class="controls col-sm-10" style="padding-right: 0px !important;"> <select id="dropdownDepot" class="form-control jqmsLoaded ms-list-1" multiple="" onchange="FillEmployeeDropdown()" data-role="select" name="Depot" style="display: none;"> <option selected="selected" value="1">PLACE1</option> <option value="2">PLACE2</option> <option value="3">PLACE3</option> <option value="4">PLACE4</option> </select> </div> </div> </div> <div class="col-sm-4 col-md-4"> <div class="form-group"> <label class="control-label control-label-left col-sm-2" for="field2"> Department</label> <div class="controls col-sm-10" style="padding-right: 0px !important;"> <select id="dropdownDepartment" multiple="" class="form-control jqmsLoaded ms-list-2" onchange="FillEmployeeDropdown()" data-role="select" name="Department" style="display: none;"> <option selected="selected" value="1">Floor</option> <option value="2">Finance</option> <option value="3">Account</option> <option value="4">Whole Sale</option> <option value="5">Admin</option> </select> </div> </div> </div> <div class="col-sm-4 col-md-4"> <div class="form-group"> <label class="control-label control-label-left col-sm-2"> Employee</label> <div class="controls col-sm-10" style="padding-right: 0px !important;"> <select id="dropdownEmployee" multiple="" class="form-control jqmsLoaded ms-list-3" data-role="select" name="Employee" style="display: none;"> <option value="3">EMP1</option> <option value="11">EMP2</option> <option value="14">WMP3</option> </select> </div> </div> </div> </div> <div class="row"> <div class="col-sm-4 col-md-4"> <div class="form-group col-xs-3"> <label class="control-label control-label-left col-sm-2 text-danger" for="field1">Date From</label> <div class="controls col-sm-8"> <div class="input-group date" id="FromDatePicker"> <input type="text" class="form-control " id="FromDate" name="FromDate" value="30/06/2019"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> <div class="col-sm-4 col-md-4"> <div class="form-group"> <label class="control-label control-label-left col-sm-2 text-danger" for="field1">Date To</label> <div class="controls col-sm-8"> <div class="input-group date" id="FromDatePicker"> <input type="text" class="form-control " id="ToDate" name="ToDate" value="30/06/2019"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> <div class="col-sm-4 col-md-4"> <div class="form-group"> <label class="control-label control-label-left col-sm-2 text-danger" for="field1">Description for TimeOff</label> <div class="controls col-sm-8"> <div class="input-group date" id="FromDatePicker"> <input type="text" class="form-control " id="FromDate" name="FromDate" value="30/06/2019"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> </div> <div class="row"> <div class="center-block"> <div class="col-sm-2"></div> <div class="col-sm-3"> <button type="submit" name="submitButton" value="saveHoliday" class="btn btn-primary form-control">Allocate Bank Holiday</button> </div> <div class="col-sm-3"> <button type="submit" name="submitButton" value="saveTimeOff" class="btn btn-primary form-control">Allocate Time Off</button> </div> <div class="col-sm-6"></div> </div> </div> </div>
    </form>
    </div>

    Sunday, June 30, 2019 10:20 AM

Answers

  • User839733648 posted

    Hi polachan,

    According to your description, I suggest that you could modfiy your code by using Grid class.

    You may refer to the following code.

    <!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>
        <div class="row">
            <form class="form-horizontal">
                <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">HOLIDAY ALLOCATION </label>
                    </div>
                    <hr style="margin-top:unset">
                    <div class="row">
                        <div class="col-sm-4 col-md-4">
                            <div class="form-group">
                                <label class="control-label control-label-left col-sm-2" for="field2"> Depot</label>
                                <div class="controls col-sm-10" style="padding-right: 0px !important;">
                                    <select id="dropdownDepot" class="form-control jqmsLoaded ms-list-1" multiple="" onchange="FillEmployeeDropdown()" data-role="select" name="Depot" style="display: none;">
                                        <option selected="selected" value="1">PLACE1</option>
                                        <option value="2">PLACE2</option>
                                        <option value="3">PLACE3</option>
                                        <option value="4">PLACE4</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4 col-md-4">
                            <div class="form-group">
                                <label class="control-label control-label-left col-sm-2" for="field2"> Department</label>
                                <div class="controls col-sm-10" style="padding-right: 0px !important;">
                                    <select id="dropdownDepartment" multiple="" class="form-control jqmsLoaded ms-list-2" onchange="FillEmployeeDropdown()" data-role="select" name="Department" style="display: none;">
                                        <option selected="selected" value="1">Floor</option>
                                        <option value="2">Finance</option>
                                        <option value="3">Account</option>
                                        <option value="4">Whole Sale</option>
                                        <option value="5">Admin</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4 col-md-4">
                            <div class="form-group">
                                <label class="control-label control-label-left col-sm-2"> Employee</label>
                                <div class="controls col-sm-10" style="padding-right: 0px !important;">
                                    <select id="dropdownEmployee" multiple="" class="form-control jqmsLoaded ms-list-3" data-role="select" name="Employee" style="display: none;">
                                        <option value="3">EMP1</option>
                                        <option value="11">EMP2</option>
                                        <option value="14">WMP3</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
    <div class="row"> <div class="container"> <div class='col-sm-4 col-md-4'> <div class="form-group"> <div class='col-sm-6 col-md-6'> <label class="control-label control-label-right text-danger" for="field1">Date From</label> </div> <div class="input-group date col-sm-6 col-md-6" id="FromDatePicker"> <input type="text" class="form-control " id="FromDate" name="FromDate" value="30/06/2019"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class='col-sm-4 col-md-4'> <div class="form-group"> <div class='col-sm-6 col-md-6'> <label class="control-label text-danger" for="field1">Date To</label> </div> <div class="input-group date col-sm-6 col-md-6" id="FromDatePicker"> <input type="text" class="form-control " id="ToDate" name="ToDate" value="30/06/2019"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class='col-sm-4 col-md-4'> <div class="form-group"> <div class='col-sm-6 col-md-6'> <label class="control-label text-danger" for="field1">Description for TimeOff</label> </div> <div class="input-group date col-sm-6 col-md-6" id="FromDatePicker"> <input type="text" class="form-control " id="FromDate" name="FromDate" value="30/06/2019"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> </div> <div class="row"> <div class="center-block"> <div class="col-sm-2"></div> <div class="col-sm-3"> <button type="submit" name="submitButton" value="saveHoliday" class="btn btn-primary form-control">Allocate Bank Holiday</button> </div> <div class="col-sm-3"> <button type="submit" name="submitButton" value="saveTimeOff" class="btn btn-primary form-control">Allocate Time Off</button> </div> <div class="col-sm-6"></div> </div> </div> </div> </form> </div> </body> </html>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 3, 2019 2:55 AM