Modal isn't showing properly

Question

I am trying to get my modal to pop open correctly. I'm using reactstrap. Currently when hitting the button to get it to display it shows up on the bottom:

Also the close modal button is somehow on the bottom of the modal header. I wanted the modal to open up on the middle of the page and dim the background. This same thing is happening on another modal which also renders on this page (Once someone hits add plant, it has an option to view or delete and delete is a modal as well). The delete modal is doing the same thing:

I don't think this has anything to do with it, but the add new plant is on its own component and is tied to the parent app component. The delete is on the same component. The form that pops up is on a component that I named plantform, here is some code from that:

const PlantForm = props => {
    const [plant, setPlant] = useState({
        id: props.number,
        nickname:"",
        species: "",
        h2oFrequency: ""
    })

  
    const changeHandler = (event) => {
        setPlant({
            ...plant,
            [event.target.name] : event.target.value
        })
    }

 

    return(
        <Modal isOpen={props.modalProp} toggle={props.modalToggle} style={{width: "40%", marginLeft:"34%"}}>
            <ModalHeader toggle={props.modalToggle} style={{background: "linear-gradient(to right, #81814D, #687158)", textAlign:"center"}}>Add Plant</ModalHeader>
            <ModalBody style={{padding: "15px", border:"1px solid #C7BEAE", background: "linear-gradient(to right, #81814D, #687158)"}}>
                <Form onSubmit={event =>{
                    event.preventDefault()
                    props.addPlant(plant)

                    setPlant({id: "", nickname:"", species: "", h2oFrequency: ""})
                    props.setNumber(props.number+1)
                    props.modalToggle()
                }} >
                    <div className="addPlant">
                        <Title>Add a New Plant</Title>
                    </div>
                    <Label htmlFor="nickname">Nickname your Plant: </Label>
                    <Input
                        id="nickname"
                        type="text"
                        name="nickname"
                        placeholder="Enter your plant's nickname"
                        value={plant.nickname}
                        onChange={changeHandler}
                        />
                    <Label htmlFor="species">Enter your Plant's Species: </Label>
                    <Input
                        id="species"
                        type="text"
                        name="species"
                        placeholder="Enter your plant's nickname"
                        value={plant.species}
                        onChange={changeHandler}
                        />
                    <Label htmlFor="h2o">Select your Water Schedule:</Label>
                    <Select
                        id="h2o"
                        name="h2oFrequency"
                        value={plant.h2oFrequency}
                        onChange={changeHandler}
                        >
                        <option value="" disabled={true}>Select Your Water Schedule</option>
                        <option value="Daily">Daily</option>
                        <option value="Weekly">Weekly</option>
                        <option value="Bi-Weekly">Bi-Weekly</option>
                        <option value="Monthly">Monthly</option>
                    </Select> 
                    <Button type="submit">Add Plant</Button>
                </Form>
            </ModalBody>
          </Modal>
    )
}

export default PlantForm;

Here is the code for the delete modal that's on the same component:

const PlantList = props => {

    const [modal, setModal]= useState(false);
    const toggle = () => setModal(!modal);

    const [plants] = useState([])
    
    
    const [plantId, setPlantId] = useState("");
    const openDeleteModal = (id)=> {
        setPlantId(id)
        toggle()
    }
    const deletePlant=() => {
        props.setPlants(props.plants.filter(plant=> plant.id!==plantId))
        setPlantId("")
        toggle()
    }
   console.log(plants)
    return(
        <div>
            <div>
                <Title>List of Plants</Title>
            </div>
            <PlantDiv>
                <Modal isOpen={modal} toggle={toggle} style={{width: "20%", marginLeft:"40%"}}>
                        <ModalBody style={{padding: "15px", border:"1px solid #C7BEAE", background: "linear-gradient(to right, #81814D, #687158)"}}>
                            <ModalPara>Would you like to delete? </ModalPara>
                        </ModalBody>
                        <ModalFooter style={{padding: "15px", border:"1px solid #C7BEAE", background: "linear-gradient(to right, #81814D, #687158)"}}>
                            <Button onClick={deletePlant}>Yes</Button>
                            <Button onClick={toggle}>No</Button>
                        </ModalFooter>
                    </Modal>
            {props.plants.map(plant =>
                <Card key={plant.id}>
                    <Para>Plant Nickname: {plant.nickname}</Para>
                    <Para>Plant Species: {plant.species}</Para>
                    <Para>Water Frequency: {plant.h2oFrequency}</Para>
                    <Link to={`/editplant/${plant.id}`}>
                    <Button>View</Button>
                    </Link>
                    <Button onClick={()=>openDeleteModal(plant.id)}>Delete</Button>
                    
                </Card>
                )}
                </PlantDiv>
                <Button onClick={props.plantToggle}>Add Plant</Button>
                
        </div>
    )
}

export default PlantList;

As a side note, I am using styled-components to style some things on the page which is why some of the tags look odd.

Answer 1

I was basically missing an import in my Apps Js. I just needed to add:

import "bootstrap/dist/css/bootstrap.min.css";

Once I did that, the modal worked the way I wanted it to!