I am delving into the world of CSS and Bootstrap, attempting to recreate a simple layout. However, I'm encountering some challenges.
My goal is to stack 2 divs on top of each other with a form that spans both divs. Can you provide insight on how to achieve this?
Below is the HTML code snippet:
<div class="one">
<div class="container">
<div class="row mx-auto">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
</div>
<div class="two">
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
</div>
<div class="form">
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1"
placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1779767a7257726f767a677b723974787a">[email protected]</a>">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
</textarea>
</div>
</form></div>
CSS :
.one {
height: 50vh;
background-color : black;
color : white;
}
.two {
height: 50vh;
background-color : red;
color : white;
}
.form {
width: 30%;
}
Feel free to view the basic example put together in Codepen here:
https://codepen.io/JeremyLemer1/pen/MWgKXzL
Attached is a sample image demonstrating the desired layout: