Reputation: 43
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!!!!!
Upvotes: 0
Views: 2284
Reputation: 6358
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
Upvotes: 2
Reputation: 5633
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>
Upvotes: 0