How to display a div on the top of another in a container (Bootstrap)?-CodePudding

I've added this div containing a date picker and I've done it in a form, since there will be more fields later, but the first one I've added displays next to the table, instead of above. I've seen many answers to a similar question, but none applied to my situation.

This

CodePudding user response：

First of all remove the <br> and <div id="page"> because this (might) breaks the Bootstrap container>row>col layout.

<div  id="container">
    <br />
    <div id="page" style="color: #373737">
        <div  id="selectFieldsDiv">

Then because the datepicker is located within the Bootstrap container start the layout with a proper row and column to wrap the form/datepicker in like so:

<div id="addTaskFieldsDiv" >
    <div id="addTaskFieldsDiv" >
        <form>
            <label for="birthday">Birthday:</label>
            <input type="date" id="birthday" name="birthday" />
        </form>
    </div>
</div>

Make sure to repeat this pattern (container>row>col) throughout the document and see if fits your needs.