CODEWITHSUNDEEP
cssreactjsjsx
New Programmer
New Programmer

Reputation: 43

how to give button a button right alignment in bootstrap?

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: enter image description here

Any help would be appreciated!!!!!

Upvotes: 0

Views: 2284

Answers (3)

MaxiGui
MaxiGui

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

Yves Kipondo
Yves Kipondo

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

Snivio
Snivio

Reputation: 1864

Add

className="float-right"

to the div wrapping the buttons

Upvotes: 0

Related Questions