locked
Why bootstrap is not taking whole row? please help RRS feed

  • Question

  • User-199788946 posted

    I have write following code:

    <div class="panel panel-primary">
        <div class="panel-heading">Approval Request</div>
        <div class="panel-body">
            <div class="well col-lg-6 mr-2">
                <h3>Budget Details</h3>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="date4">Date</label>
                        <input type="text" class="form-control" id="date4" placeholder="Email">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="inputType">Type</label>
                        <select class="form-control form-control-lg" id="inputType">
                            <option>Please Select</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputType">Months</label>
                    <select class="form-control form-control-lg" id="inputType">
                        <option>Please Select</option>
                        <option value="1">Jan</option>
                        <option value="2">Feb</option>
    
                    </select>
                </div>
            </div>
            <div class="well col-lg-5 ml-2">
    
            </div>
        </div>
    </div>
    

    My output is 

    https://drive.google.com/file/d/1yVtkUeqsuft5yPoaA33Gn2ilz5AAURb9/view?usp=sharing

    why second row month select option is not taking entire row ie. 12    

    Sunday, May 31, 2020 5:24 PM

All replies

  • User-474980206 posted

    We cannot see all your css. Just use the browsers css debugger to which css rule is causing your issue.

    Sunday, May 31, 2020 10:35 PM
  • User-2054057000 posted

    why second row month select option is not taking entire row ie. 12 

    Try this:

    <div class="form-group col-md-12">
        <label for="inputType">Months</label>
        <select class="form-control form-control-lg" id="inputType">
            <option>Please Select</option>
            <option value="1">Jan</option>
            <option value="2">Feb</option>
        </select>
    </div>

    Monday, June 1, 2020 6:08 AM
  • User-474980206 posted

    more valid markup would be:

    1) but 3rd control in its own row;

           <div class="well col-lg-6 mr-2">
                <h3>Budget Details</h3>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="date4">Date</label>
                        <input type="text" class="form-control" id="date4" placeholder="Email">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="inputType">Type</label>
                        <select class="form-control form-control-lg" id="inputType">
                            <option>Please Select</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                       <label for="inputType">Months</label>
                       <select class="form-control form-control-lg" id="inputType">
                           <option>Please Select</option>
                           <option value="1">Jan</option>
                           <option value="2">Feb</option>
                       </select>
                    </div>
                </div>
            </div>

    or add to the row:

            <div class="well col-lg-6 mr-2">
                <h3>Budget Details</h3>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="date4">Date</label>
                        <input type="text" class="form-control" id="date4" placeholder="Email">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="inputType">Type</label>
                        <select class="form-control form-control-lg" id="inputType">
                            <option>Please Select</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                        </select>
                    </div>
                    <div class="form-group">
                       <label for="inputType">Months</label>
                       <select class="form-control form-control-lg" id="inputType">
                           <option>Please Select</option>
                           <option value="1">Jan</option>
                           <option value="2">Feb</option>
                       </select>
                    </div>
                </div>
            </div>

    Monday, June 1, 2020 4:09 PM
  • User-1151440187 posted

    <div class="row">
    <div class="col-md-12">
    <div class="form-group">

    <label for="inputType">Months</label>
    <select class="form-control form-control-lg" id="inputType">
    <option>Please Select</option>
    <option value="1">Jan</option>
    <option value="2">Feb</option>

    </select>

    </div>
    </div>
    </div>

    The dropdown from the first two classes will be aligned in the whole row.

    I hope it will help you.

    Thanks!

    Tuesday, June 2, 2020 4:13 AM