Centering Modal Title and button in React Bootstrap

I tried different classes but what is working is this:

import React from "react";
import { Modal, Button } from "react-bootstrap";

const ModalPage = ({ modalShow, handleClose, isVerified }) => {
  return (
    <Modal
      show={modalShow}
      onHide={handleClose}
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header
        closeButton
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Modal.Title>
          {isVerified ? "Submitted succesfully" : "Failed to submit"}
        </Modal.Title>
      </Modal.Header>          
      <Modal.Footer
        style={{
          display: "flex",
          justifyContent: "center",
        }}
      >
        <Button
          variant={`${isVerified == false ? "danger " : "success"}`}
          onClick={handleClose}
          centered
        >
          {isVerified ? "Ok" : "Try again"}
        </Button>
      </Modal.Footer>
    </Modal>
  );
};

export default ModalPage;

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top