Make ReactStrap/Bootstrap4 Cards In Separate Columns Same Height

Question

I have an example at https://codesandbox.io/s/426277vml9. I am using separate columns because I want them to stack at low resolution.

Obviously, right now, height is a function of content, and so they are unequal. Is there any way (short of imposing a fixed height) to get them to automagically align to the same height?

  <Container fluid className="full-height bg-light">
      <Row className="h-100 justify-content-center full-height align-items-center bg-light">
        <Col xs="10" lg="3" className="p-0">
          <Card>
            <CardBody>
              <CardTitle>LOGIN</CardTitle>
              <CardText>Sign in with your account.</CardText>
              <InputGroup className="mb-3">
                <div className="input-group-prepend">
                  <span className="input-group-text">
                    <i className="icon-user"></i>
                  </span>
                </div>
                <Input type="text" placeholder="Username"/>
              </InputGroup>
              <InputGroup className="mb-4">
                <div className="input-group-prepend">
                  <span className="input-group-text">
                    <i className="icon-lock"></i>
                  </span>
                </div>
                <Input type="password" placeholder="Password"/>
              </InputGroup>
              <Row>
                <Col xs="12" lg="6">
                  <Button color="primary" className="px-4">Login</Button>
                </Col>
                <Col xs="12" lg="6" className="text-right">
                  <Button color="link" className="px-0">Forgot password?</Button>
                </Col>
              </Row>
            </CardBody>
          </Card>
        </Col>
        <Col xs="10" lg="3" className="p-0">
          <Card color="primary">
            <CardBody className="text-white">
              <CardTitle>CREATE ACCOUNT</CardTitle>
              <CardText>If you want to create an account for your company to start using this product, click on the Create button. If your organization already has an account and you'd like to join it, click on the "Join" button.</CardText>
              <Row>
                <Col xs="12" md="6">
                  <Button color="success" className="px-4">Create</Button>
                </Col>
                <Col xs="12" md="6" className="text-right">
                  <Button color="success" className="px-4">Join</Button>
                </Col>
              </Row>
            </CardBody>
          </Card>
        </Col>
      </Row>
    </Container>

Probably cause this question gets asked far too often on SO. Did you search for duplicates? On top of that, you are required to show your markup here within your question and not your site. Links go dead and this won't help anyone in the future. [mcve] I am shocked you don't know that already. — Rob, Feb 01 '18 at 17:04
Possible duplicate of: https://stackoverflow.com/questions/47840534/bootstrap-cards-with-100-height-and-margin-bottom — Rob, Feb 01 '18 at 17:09
@Rob I cannot confirm the solution posted in the self-answer by the author in the linked post offers a solution. Not a working solution for **Bootstrap 4** anyway. — WebDevBooster, Feb 01 '18 at 17:19
@WebDevBooster: I am using Reactstrap, which is Bootstrap4 as React components. I have edited the question title to better reflect this. My apologies. — alphadogg, Feb 01 '18 at 17:35
@Rob: The MCV page doesn't stipulate the example must be inline. But, I get the point, I edited to have the relevant block of code also in the question. — alphadogg, Feb 01 '18 at 17:36
@Rob, also the stated possible duplicate does not solve my issue. — alphadogg, Feb 01 '18 at 17:39

dferenc · Accepted Answer · 2018-02-01T17:09:38.443

You have to modify your markup slightly in order to achieve that. Below you will find the sample markup. Here is the breakdown:

Separate the .justify-content-center class from the .align-items-center by applying the latter on the div with .container-fluid and also adding a .d-flex to this outer div.
You can delete .h-100 .full-height .bg-light classes from the .row now.
With this setup the divs with the .col-10 will already be of same height, so the only thing left is to put h-100 on the .cards, to make them fill up the vertical space.

.full-height {
    min-height:100vh;
}

<div id="root">
    <div class="container-fluid d-flex full-height align-items-center bg-light">
        <div class="row justify-content-center">
            <div class="p-0 col-10 col-lg-3">
                <div class="card h-100">
                    <div class="card-body">
                        <h4 class="card-title">LOGIN</h4>
                        <p class="card-text">Sign in with your account.</p>
                        <div class="mb-3 input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="icon-user"></i></span>
                            </div>
                            <input placeholder="Username" class="form-control" type="text">
                        </div>
                        <div class="mb-4 input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="icon-lock"></i></span>
                            </div>
                            <input placeholder="Password" class="form-control" type="password">
                        </div>
                        <div class="row">
                            <div class="col-12 col-lg-6">
                                <button class="px-4 btn btn-primary">Login</button>
                            </div>
                            <div class="text-right col-12 col-lg-6">
                                <button class="px-0 btn btn-link">Forgot password?</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="p-0 col-10 col-lg-3">
                <div class="card h-100 bg-primary">
                    <div class="text-white card-body">
                        <h4 class="card-title">CREATE ACCOUNT</h4>
                        <p class="card-text">If you want to create an account for your company to start using this product, click on the Create button. If your organization already has an account and you'd like to join it, click on the "Join" button.</p>
                        <div class="row">
                            <div class="col-12 col-md-6">
                                <button class="px-4 btn btn-success">Create</button>
                            </div>
                            <div class="text-right col-12 col-md-6">
                                <button class="px-4 btn btn-success">Join</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

score 0 · Answer 2 · answered Nov 27 '18 at 15:04

0

You can use reactstrap's CardDeck for that.

answered Nov 27 '18 at 15:04

Mawaheb

822
10
21

Make ReactStrap/Bootstrap4 Cards In Separate Columns Same Height

2 Answers2

Linked