I want to align the 2 fields that are Left Bottom (Currency I Want:, Amount) to Right Top in Bootsrap 5. I have spent tons of hours and cannot figure out! Could you help me?
[1]: https://i.stack.imgur.com/0Yjdu.jpg [1]
My code is the following:
return (
<div className="card card-body p-3 mb-2 bg-light text-dark">
<h1>Currency Converter</h1>
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label>Currency I have:</label>
<select className="form-select" type="text" >
<option value="1" selected >USD</option>
<option value="2">EUR</option>
<option value="3">GBP</option>
</select>
</div>
<div className="form-group col-md-4">
<label>Amount:</label>
<input type="number" className="form-control"/>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-4">
<label>Currency I Want:</label>
<select className="form-select" type="text" >
<option value="1" selected >USD</option>
<option value="2">EUR</option>
<option value="3">GBP</option>
</select>
</div>
<div className="form-group col-md-4">
<label>Amount:</label>
<input type="number" className="form-control"/>
</div>
</div>
<button type="submit" className="btn btn-secondary mb-2">Convert</button>
</form>
</div>
);
}```
CodePudding user response：
Create a new div that shares both columns and add d-flex class to it.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="card card-body p-3 mb-2 bg-light text-dark">
<h1>Currency Converter</h1>
<form>
<div class="d-flex">
<div class="form-row col-md-6 col-sm-6">
<div class="form-group col-md-8">
<label>Currency I have:</label>
<select class="form-select" type="text" >
<option value="1" selected >USD</option>
<option value="2">EUR</option>
<option value="3">GBP</option>
</select>
</div>
<div class="form-group col-md-8">
<label>Amount:</label>
<input type="number" class="form-control"/>
</div>
</div>
<div class="form-row col-md-6 col-sm-6">
<div class="form-group col-md-8">
<label>Currency I Want:</label>
<select class="form-select" type="text" >
<option value="1" selected >USD</option>
<option value="2">EUR</option>
<option value="3">GBP</option>
</select>
</div>
<div class="form-group col-md-8">
<label>Amount:</label>
<input type="number" class="form-control"/>
</div>
</div>
</div>
<br/>
<button type="submit" class="btn btn-secondary mb-2">Convert</button>
</form>
</div>CodePudding user response：
float-end using in form row
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div className="card card-body p-3 mb-2 bg-light text-dark float-right">
<h1>Currency Converter</h1>
<br>
<form>
<div class="form-row float-end">
<div class="form-group col-md-4">
<label>Currency I have:</label>
<select className="form-select" type="text" >
<option value="1" selected >USD</option>
<option value="2">EUR</option>
<option value="3">GBP</option>
</select>
</div>
<div className="form-group col-md-4 float-end">
<label>Amount:</label>
<input type="number" className="form-control"/>
</div><br>
</div>
<div className="form-row">
<div className="form-group col-md-4">
<label>Currency I Want:</label>
<select className="form-select" type="text" >
<option value="1" selected >USD</option>
<option value="2">EUR</option>
<option value="3">GBP</option>
</select>
</div><br/>
<div className="form-group col-md-4 ">
<label>Amount:</label>
<input type="number" className="form-control"/>
</div><br/>
</div>
<button type="submit" className="btn btn-secondary mb-2">Convert</button>
</form>
</div>Check Out More Details
CodePudding user response：
How Can I Push the 2 rows Right to the end with the Button in middle?
My updated image after the answer
My source code:
return (
<div class="card card-body p-3 mb-2 bg-light text-dark">
<h1>Currency Converter</h1>
<form>
<div class="d-flex">
<div class="form-row col-md-6 col-sm-6">
<div class="form-group col-md-8">
<label>Currency I Have:</label>
<select class="form-select" type="text" >
<option value="1" selected >USD</option>
<option value="2">EUR</option>
<option value="3">GBP</option>
</select>
</div>
<div class="form-group col-md-8">
<label>Amount:</label>
<input type="number" class="form-control"/>
</div>
</div>
<div class="form-row col-md-6 col-sm-6 float-right">
<div class="form-group col-md-8">
<label>Currency I Want:</label>
<select class="form-select" type="text" >
<option value="1" selected >USD</option>
<option value="2">EUR</option>
<option value="3">GBP</option>
</select>
</div>
<div class="form-group col-md-8">
<label>Amount:</label>
<input type="number" class="form-control"/>
</div>
</div>
</div>
<br/>
<button type="submit" class="btn btn-secondary mb-2">Convert</button>
</form>
</div>
);
}```
CodePudding user response：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="card card-body p-3 mb-2 bg-light text-dark">
<h1>Currency Converter</h1>
<form>
<div class="d-flex">
<div class="form-row col-md-6 col-sm-6">
<div class="form-group col-md-8">
<label>Currency I have:</label>
<select class="form-select" type="text" >
<option value="1" selected >USD</option>
<option value="2">EUR</option>
<option value="3">GBP</option>
</select>
</div>
<div class="form-group col-md-8">
<label>Amount:</label>
<input type="number" class="form-control"/>
</div>
</div>
<div class="form-row col-md-6 col-sm-6">
<div class="form-group col-md-8">
<label>Currency I Want:</label>
<select class="form-select" type="text" >
<option value="1" selected >USD</option>
<option value="2">EUR</option>
<option value="3">GBP</option>
</select>
</div>
<div class="form-group col-md-8">
<label>Amount:</label>
<input type="number" class="form-control"/>
</div>
</div>
</div>
<br/>
<button type="submit" class="btn btn-secondary mb-2">Convert</button>
</form>
</div>Thank you, this did the trick!