how to give button a button right alignment in bootstrap? - css

Question

I'm trying to align two buttons at the right corner of a row but no matter what method I use it shows the same result every time here's the code for your reference:
import React from "react";
import bootstrap from "bootstrap";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
const AdminPanel = () => {
const users = [{ name: "Talha" }, { name: "Ali" }];
return (
<Container className="pt-5">
<Row className="d-flex" style={{ height: "70vh" }}>
<Col className="shadow-lg bg-white rounded mx-5">
{users.map((user) => (
<Row
className="shadow my-3 mx-2 py-2 px-2 rounded font-weight-bold"
style={{ height: "7vh" }}
>
{user.name}
<div className="btn-group">
<a href="#">
<button className="btn btn-primary">Edit</button>
</a>
<a href="#">
<button className="btn btn-danger">Delete</button>
</a>
</div>
</Row>
))}
</Col>
<Col className="shadow-lg bg-white rounded mx-5">
<h1>
list
</h1>
</Col>
</Row>
</Container>
);
};
export default AdminPanel;
the result I'm getting is this:
Any help would be appreciated!!!!!

Answer 1

Add class: ml-auto (= margin-left:auto !important) into:
<div className="btn-group ml-auto">
As this div is in a div.row that has the property display:flex; applied, it should push it to the right automaticly

Answer 2

Add
className="float-right"
to the div wrapping the buttons

Answer 3

You can add each block of child Element of your Row in a Col Component and add the justify-content-between class to the Row Component like this
<Col className="shadow-lg bg-white rounded mx-5">
{users.map((user) => (
<Row
className="justify-content-between shadow my-3 mx-2 py-2 px-2 rounded font-weight-bold"
style={{ height: "7vh" }}
>
<Col>
{user.name}
</Col>
<Col>
<div className="btn-group">
<a href="#">
<button className="btn btn-primary">Edit</button>
</a>
<a href="#">
<button className="btn btn-danger">Delete</button>
</a>
</div>
</Col>
</Row>
))}
</Col>