1

Bootstrap 4 grid issue with usage of div, it does not generate correct output.

Here is my code:

<div class="container mt-3">
    <div class="row">
        <div class="col-md-2">
            <label>Country <span class="required-span"> * </span></label>
        </div>
        <div class="col-md-4">
            <select class="form-control valid" data-val="true" id="Country" name="Country" style="color:black">
                <option value="">----Select----</option>
                <option value="22" data-abbreviation="BELG" data-province="True">Belgium</option>
            </select>
            <span class="field-validation-valid text-danger" data-valmsg-for="Country" data-valmsg-replace="false" style="display:none">Country is required.</span>
        </div>
        <div id="divProvinces" style="">
            <div class="col-md-4">
                <label>Provinces<span class="required-span"> * </span></label>
            </div>
            <div class="col-md-8">
                <select class="form-control" id="District" name="District" style="color:gray;font-style:italic;font-size: 14px;"><option value="">--Select--</option><option value="1">Antwerp</option></select>
                <span class="field-validation-valid text-danger" data-valmsg-for="District" data-valmsg-replace="false" style="display:none">Provinces is required.</span>
            </div>
        </div>
    </div>
</div>

this should render as enter image description here

but the desired output is not like this. This is due to usage of div element with id <div id="divProvinces" style=""> can you suggest any other alternative?

1

If you must keep the outer divProvinces make it a col-md-6, and then nest the right side columns...

<div class="container mt-3">
    <div class="row">
        <div class="col-md-2">
            <label>Country <span class="required-span"> * </span></label>
        </div>
        <div class="col-md-4">
            <select class="form-control valid" data-val="true" id="Country" name="Country" style="color:black">
                <option value="">----Select----</option>
                <option value="22" data-abbreviation="BELG" data-province="True">Belgium</option>
            </select>
            <span class="field-validation-valid text-danger" data-valmsg-for="Country" data-valmsg-replace="false" style="display:none">Country is required.</span>
        </div>
        <div id="divProvinces" style="" class="col-md-6">
            <div class="row">
                <div class="col-md-4">
                    <label>Provinces<span class="required-span"> * </span></label>
                </div>
                <div class="col-md-8">
                    <select class="form-control" id="District" name="District" style="color:gray;font-style:italic;font-size: 14px;">
                        <option value="">--Select--</option>
                        <option value="1">Antwerp</option>
                    </select>
                    <span class="field-validation-valid text-danger" data-valmsg-for="District" data-valmsg-replace="false" style="display:none">Provinces is required.</span>
                </div>
            </div>
        </div>
    </div>
</div>

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.