React Strap Cards Unable to Align Items According to The Screen Size

React strap Cards unable to align items according to the screen size

First, in SongCard you might not need to encapsulate your card component in a div, it make your style for Card kind of unavailable because the div is by default full Width.

Secondly, CardDeck should be outside of the map loop cause you create a new CardDeck each post and it might not be what you want. to put you "key={post.etag}" directly in SongCard instead.

I also don't recommend to add custom style in style in CardDeck because you will break the default layout for all devices.

    import React from 'react'
import SongCard from '../SongCard'
import {
    CardDeck
} from 'reactstrap';

function Popular({ popular }) {
    return (
        <CardDeck>
            {popular.map((post) =>
                            <SongCard
                                key={post.etag}
                                Title={post.snippet.title}
                                VideoId={post.id.videoId}
                                Image={post.snippet.thumbnails.high.url}
                                ChannelTitle={post.snippet.channelTitle} />
                </div>)
            }
       </CardDeck>
    )
}

export default Popular

And

   import React from 'react'
import {
    Card, CardImg, CardText, CardBody,
    CardTitle, CardSubtitle
} from 'reactstrap';

function SongCard({ Title, VideoId, Image, ChannelTitle }) {
    return (
            <Card>
                <CardImg top src={Image} alt="image" />
                <CardBody>
                    <CardTitle>{Title}</CardTitle>
                    <CardSubtitle>{ChannelTitle}</CardSubtitle>
                    <CardText></CardText>
                </CardBody>
            </Card>
    )
}

export default SongCard

Card Text alignment in react Card Bootstrap

What I understand from a problem is you want to move the button on the right bottom of all cards.
You can use position "relative" on the body and for link position "absolute".

<Card.Body style={{ position: "relative" }}>
  <Card.Title>{e.name}</Card.Title>
  <Card.Text>{e.Description}</Card.Text>
  <Link to={e.link} style={{ position: "absolute", bottom: 0, right: 0 }}>
    <Button
      variant="primary"
      style={{
        backgroundColor: "#aa92df",
        borderStyle: "none",
        float: "right",
      }}
    >
      Select
    </Button>
  </Link>
</Card.Body>

How do I make my React Bootstrap cards line up horizontally and equally spaced (also responsively if possible)

You could use style={{display: 'flex', flexDirection: 'row'}} on the CardDeck and then put style={{flex: 1}} on the card.

They should fill up the remaining space. One thing is to make sure to provide the size that you want the CardDeck to be.

More info on flexbox here

How to align elements in bootstrap cards to bottom of card?

you can use display flex. but you need to break your CardBody into two divs, one with the content, and another with the button. use then justifyContent: 'space-between'. Add also some margin-top to wrapping button div to ensure some space for safety.

below the approach I described:

<Card>
  <CardBody style={{display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
    <div>
      <CardTitle tag="h5">Card title</CardTitle>
      <CardSubtitle tag="h6" className="mb-2 text-muted">
        Card subtitle
      </CardSubtitle>
      <CardText>
        Some quick example text to build on the card title and make up the
        bulk of the card's content.
      </CardText>
    </div>

    <div style={{marginTop: '12px'}}>
      <Button >Button</Button>
    </div>
  </CardBody>
</Card>

React-Bootstrap Rows/Columns are not the full width of the screen (Only 50% of it)

By default in bootstrap, container width and max-width is set to some px like,

@media (min-width: 768px)
.container {
    max-width: 720px;
}

@media (min-width: 576px)
.container {
    max-width: 540px;
} 

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

You have to set max-width: 100% like,

.container {
  max-width: '100%'  //This will make container to take screen width
}

Or, Another way is, you can add fluid prop to Container,

fluid - Allow the Container to fill all of it's availble horizontal space.

<Container fluid>
  ...
</Container>

Note: Here Col will take by default equal space.

The Col lets you specify column widths across 5 breakpoint sizes (xs, sm, md, large, and xl).

For example,

<Row>
    <Col xs={6} md={8}>
      xs=6 (6 parts of screen on small screen) md=8 (8 parts of screen on medium screen)
    </Col>
    <Col xs={6} md={4}>
      xs=6 md=4
    </Col>
</Row>

React Bootstrap: Vertical alignment of row's columns?

If you are using table rows, you can wrap contents within a <div>..</div>

like:

<tr>
  <div classname="align-me"></div>
</tr>

and then you can use flexbox to align them dynamically:

tr .align-me {
  display: flex;
  align-items: center;
}

---

Related Topics