How to align the contents of card in React-Bootstrap based on the content's height/length?

Question

I want to align the content of the cards such that when the title of the content is too long, the other details such as the Created on, By and View would be on the same line. I've tried using a fixed height with min-height for the title row but I don't think it's a good solution as when the title is shorter, there will be a lot of white/empty space.

I also tried using flex-grow: 1 on the title but it won't fill up the empty spaces as well.

         <Col>
            <Card 
                className='text-center' 
                style={{
                    height: '100%',
                    padding: '15px', 
                    borderRadius: '20px',
                    boxShadow: '0px 5px 15px 0px rgb(0 0 0 / 20%)'
                }}
            >
                <Row style={{marginBottom: '5px'}}>
                    <Col md={6} style={{textAlign: 'left'}}>
                        <div 
                            className='btn btn-success'}
                            style={{padding: '5px 25px', borderRadius: '50px', cursor: 'default', textTransform: 'capitalize'}}
                        >
                            {bulletin.liveStatus}
                        </div>
                    </Col>
                    <Col md={6} style={{textAlign: 'right'}}>
                        <div className='ellipsis-menu' ref={ref}>
                            <FaIcons.FaEllipsisH onClick={showDropDown} style={{cursor: 'pointer'}} />
                    </Col>
                </Row>
                <div className='view-bulletin-link'>
                    <Card.Img variant='top' src={imageCoverUrl} style={{objectFit: 'cover', height: '15rem', width: '100%', display: 'block'}}/>
                    <Card.Body>
                        <Card.Title style={{fontSize: '1rem'}}><strong>{bulletin.title}</strong></Card.Title>
                        <Card.Text>Created on {moment(bulletin.createdDate).format("DD/MM/YYYY")} <br />By {bulletin.createdBy}</Card.Text>
                        <Card.Text>{bulletin.viewCount > 1 ? <>{bulletin.viewCount} Views</> : <>{bulletin.viewCount} View</>}</Card.Text>
                    </Card.Body>
                </div>
            </Card>
        </Col>

score 0 · Answer 1 · answered Oct 16 '21 at 10:03

0

You can achieve this with flex.

Card content should have

flex-direction: col;
align-items: space-around

and wrap the top and bottom aligned elements in different div/spans.

answered Oct 16 '21 at 10:03

Jayaram Kasi

54
6

score -1 · Answer 2 · answered Sep 30 '21 at 06:43

You could group the created and view count together and make it bottom position.

See example below

<div style="postion:absolute; bottom: 0">
                        <Card.Text>Created on {moment(bulletin.createdDate).format("DD/MM/YYYY")} <br />By {bulletin.createdBy}</Card.Text>
                        <Card.Text>{bulletin.viewCount > 1 ? <>{bulletin.viewCount} Views</> : <>{bulletin.viewCount} View</>}</Card.Text>

</div>

How to align the contents of card in React-Bootstrap based on the content's height/length?

2 Answers2