Looking for guidance on designing a responsive screen using the Bootstrap-4 grid system for web development. Here's an image of what I'm aiming to create using rows and columns:
Code snippet:
<div className="row">
<div className="col-md-10">
<div className="row">
<div className="col-md-4">
<div className="fontStyle">
<span className="">1</span>
<label type="text">Select Technology</label>
<select value="" className="selectpicker btn btn-labeled btn-start">
<option value="">None Selected</option>
<option value="">Hello </option>
<option value="">World </option>
</select>
</div>
</div>
<div className="col-md-4 rowOne">
<div className="fontStyle">
Select Question Type
<button type="button" class="btn btn-primary btn-sm">Code Type</button>
<button type="button" class="btn btn-default btn-sm">Non Code Type</button>
</div>
</div>
<div className="col-md-4">
<div className="fontStyle">
Number Of Questions
<select value="" onChange="" className="selectpicker btn btn-labeled btn-start">
<option value="">Select</option>
<option value="">01</option>
<option value="">02</option>
</select>
</div>
</div>
</div>
</div>
<div className="col-md-2">
<span className="">
<button type="button" class="btn btn-outline-primary btn-sm">Reset</button>
</span>
<span>
<button type="button" class="btn btn-primary btn-sm">+</button>
</span>
</div>
Check out the final design here
Any help or advice is appreciated, thank you!