How to Move Rows to the Right in Bootsrap 5? - html

Question

I want to move 2 rows at the right of the page so everything will be in right order, 2 rows on the left, button in the middle and 2 rows at the right! I will post an image and my source code!
Project Image
My source code using bootsrap 5:
function Converter () {
return (
<div className="card card-body p-3 mb-2 bg-light text-dark">
<h1>Currency Converter</h1>
<form>
<div className="d-flex">
<div className="form-row col-md-6 col-sm-6">
<div className="form-group col-md-8">
<label><strong>Currency I Have:</strong></label>
<select className="form-select" type="text" >
<option value="1" selected >USD</option>
<option value="2">EUR</option>
<option value="3">GBP</option>
<option value="3">CAD</option>
<option value="3">AUD</option>
</select>
</div>
<div className="form-group col-md-8">
<label><strong>Amount:</strong></label>
<input type="number" class="form-control"/>
</div>
</div>
<div className="form-row col-md-6 col-sm-6">
<div className="form-group col-md-8">
<label><strong>Currency I Want:</strong></label>
<select className="form-select" type="text" >
<option value="1" selected >EUR</option>
<option value="2">USA</option>
<option value="3">GBP</option>
<option value="3">CAD</option>
<option value="3">AUD</option>
</select>
</div>
<div className="form-group col-md-8">
<label><strong>Amount:</strong></label>
<input type="number" className="form-control"/>
</div>
</div>
</div>
<br/>
<button type="submit" class="btn btn-primary mb-2">Convert</button>
</form>
</div>
);
}

Answer 1

you can use like this
<div class="row">
<div class="col-md-5">
<div class="row">
code for first drop downs
</div>
</div>
<div class="col-md-2">
</div>
<div class="col-md-5">
<div class="row">
code for Second list of drop downs
</div>
</div>

Answer 2

Try this and fill your code snippets:
<div class="container">
<div class="row align-items-center justify-content-evenly">
<div class="col-md-5 text-start">
<!-- First drop down -->
</div>
<div class="col-md-2 text-center">
<!-- Button -->
</div>
<div class="col-md-5 text-end">
<!-- Second drop down -->
</div>
</div>
</div>