Search code examples
reactjsreactstrapinline-styles

How to set a background color to the whole column in React

I'm trying to implement a card component with multiple columns with the first column set as an edit button and the last column as a details button. Something like this enter image description here

I'm using reactstrap library to do this but but I'm not able to set a background to the whole height of a card instead of just the column height. This is my code

import {
  Card,
  CardImg,
  CardText,
  CardBody,
  CardTitle,
  CardSubtitle,
  Button
} from 'reactstrap';
return (<Card style={{
            textAlign: "left",
            margin:"3%",
            padding:"3%"
          }}>
          <Row style={{
              display: "flex"
            }}>
            <Col sm="3">
              <CardImg top="top" style = {{width:"80%", margin: "0.1rem"}} src={logo} alt="Card image cap"/>
            </Col>
            <Col sm="9">
              <CardBody>
                <CardTitle tag="h5" style={{fontWeight:"bold"}}>Project title</CardTitle>
                <Row style = {{display: "flex"}}><Col sm="6">{data.profName}</Col>
                 <Col sm="6">{data.dept}</Col>
                 </Row>
                <CardText style={{color:"#000000"}}>{data.description}</CardText>
                <Row style={{
                    display: "flex",
                    fontSize:"20px"
                  }}>
                  <Col sm="3" style={{alignItems:"center"}}><img src="a1.png" alt="" style={{width:"20%"}}/>{data.duration} months</Col>
                  <Col sm="3" style={{alignItems:"center"}}><img src="a3.png" alt="" style={{width:"20%"}}/>{data.totalSlots} students</Col>
                  <Col sm="3" style={{alignItems:"center"}}><img src="a2.png" alt="" style={{width:"20%"}}/>INR {data.stipend}</Col>
                  <Col sm="3" style={{background:"rgb(15, 135, 151)", padding:"0", margin:"0"}}>
                    <center>
                    <Link to ={"/Projects/" + data["project-uid"]}><Button style={{
                        backgroundColor: "#0F8797",
                        color: "white"
                      }}>Details</Button></Link>
                      </center>

                  </Col>
                </Row>
              </CardBody>
            </Col>
          </Row>
        </Card>);

Which makes the Details button look like this enter image description here

Solution

  • Why don't you try putting the buttons outside of the card? You can make a row that contains the card with a button before and a button after. The buttons will be the full height of the row, and you can make the row flex and apply flex-grow to the card, with the buttons having fixed widths.