Tutorial on achieving full screen height for Bootstrap card within a column

Question

Tutorial on achieving full screen height for Bootstrap card within a column

I am working on a React grid layout with two cards, each in one column. My goal is to make the card on the left fill the entire column height (screen height), and if its content expands, have a scrollbar while keeping the second card intact and aligned to the middle of the screen.

<header className="App-header">
  <Container>
    <Row>
      <Col md={4}>
        <Card>some text here</Card>
      </Col>
      <Col md={8} className="align-self-center">
        <Card>some other text here</Card>
      </Col>
    </Row>
  </Container>
</header>

Here is the CSS code snippet:

.App-header {
  background-color: #282c34;
  min-height: calc(100vh - 59px);
  max-height: calc(100vh - 59px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
}

This is the current UI design: https://i.sstatic.net/3vdmh.png

You can also view the code on CodeSandbox here

html css bootstrap-4 react-bootstrap

Answer 1

Answer №1

To ensure your layout is properly adjusted, make sure to include the following classes in your HTML structure:

Within your container element, row element, column with a medium breakpoint of 4, and card element, add the class "h-100". This will set the height of both the column and card to be equal to 100vh - 59px.

Additionally, you can enable vertical scrolling by applying the style "overflow-y: auto" or using Bootstrap's predefined class "overflow-auto" on the card element.

To center the right card within the row, apply the class "align-items-center" to the row element.

Here is an example snippet:

import React from "react";
import "./App.css";
import { Card, Col, Container, Row, Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Container className="h-100">
          <Row className="h-100 align-items-center"> /* <-- put the align items here */
            <Col md={4} className="treeViewComponent h-100">
              <Card className="h-100 overflow-auto">
                <Card.Body>Text here</Card.Body>
                <Card.Footer>
                  <Button>Do stuff</Button>
                </Card.Footer>
              </Card>
            </Col>
            <Col md={8} className="compressionComponent align-items-center">
              <Card>
                <Card.Body>
                  More text here text here text here text here text here text
                  here text here text here text here text here{" "}
                </Card.Body>
              </Card>
            </Col>
          </Row>
        </Container>
      </header>
    </div>
  );

Don't forget to style the .App-header as well:

.App-header {
  background-color: #282c34;
  height: calc(100vh - 59px);
  font-size: calc(10px + 2vmin);
}

Answer 2

To ensure your layout is properly adjusted, make sure to include the following classes in your HTML structure:

Within your container element, row element, column with a medium breakpoint of 4, and card element, add the class "h-100". This will set the height of both the column and card to be equal to 100vh - 59px.

Additionally, you can enable vertical scrolling by applying the style "overflow-y: auto" or using Bootstrap's predefined class "overflow-auto" on the card element.

To center the right card within the row, apply the class "align-items-center" to the row element.

Here is an example snippet:

import React from "react";
import "./App.css";
import { Card, Col, Container, Row, Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Container className="h-100">
          <Row className="h-100 align-items-center"> /* <-- put the align items here */
            <Col md={4} className="treeViewComponent h-100">
              <Card className="h-100 overflow-auto">
                <Card.Body>Text here</Card.Body>
                <Card.Footer>
                  <Button>Do stuff</Button>
                </Card.Footer>
              </Card>
            </Col>
            <Col md={8} className="compressionComponent align-items-center">
              <Card>
                <Card.Body>
                  More text here text here text here text here text here text
                  here text here text here text here text here{" "}
                </Card.Body>
              </Card>
            </Col>
          </Row>
        </Container>
      </header>
    </div>
  );

Don't forget to style the .App-header as well:

.App-header {
  background-color: #282c34;
  height: calc(100vh - 59px);
  font-size: calc(10px + 2vmin);
}

Answer 3

Answer №2

In my opinion, adding height: 100% to the css of the specific column you want to extend should automatically fill up the container.

If you want scrolling to be enabled only when necessary, simply set the css property overflow: auto on the scrollable container.

Based on your css code, it seems like the other card is meant to remain centered despite these adjustments.

Answer 4

In my opinion, adding height: 100% to the css of the specific column you want to extend should automatically fill up the container.

If you want scrolling to be enabled only when necessary, simply set the css property overflow: auto on the scrollable container.

Based on your css code, it seems like the other card is meant to remain centered despite these adjustments.

Answer 5

Answer №3

To incorporate Bootstrap classes, simply include the vh-100 class on the left card. Additionally, in your custom CSS, remember to add overflow-y : auto to enable scrolling only when necessary.

Answer 6

To incorporate Bootstrap classes, simply include the vh-100 class on the left card. Additionally, in your custom CSS, remember to add overflow-y : auto to enable scrolling only when necessary.

Answer 7

Answer №4

It appears that you have implemented flexbox in your layout. To optimize the use of flex, consider utilizing the align-items: stretch; property alongside setting a maximum height for the parent container.

The align-items: stretch; declaration enables child elements to occupy the entire available height within the container.
If you set a restriction on the parent container's height, you can apply overflow settings to an internal element as needed.

Answer 8

It appears that you have implemented flexbox in your layout. To optimize the use of flex, consider utilizing the align-items: stretch; property alongside setting a maximum height for the parent container.

The align-items: stretch; declaration enables child elements to occupy the entire available height within the container.
If you set a restriction on the parent container's height, you can apply overflow settings to an internal element as needed.

Answer 9

Answer №5

Include overflow-hidden, vh-100, and mh-100 in the styles for the left column...

       <div className="App">
          <header className="App-header">
            <Container className="">
              <Row className="align-items-center overflow-hidden">
                <Col
                  md={4}
                  className="treeViewComponent vh-100 mh-100 overflow-hidden"
                >
                  <Card className="h-100 overflow-auto">
                    <Card.Body>Text goes here</Card.Body>
                    <Card.Footer>
                      <Button>Perform action</Button>
                    </Card.Footer>
                  </Card>
                </Col>
                <Col md={8} className="compressionComponent align-items-center">
                  <Card>
                    <Card.Body>
                      More text here more text here more text here more text here more text
                      here more text here more text here more text here more text{" "}
                    </Card.Body>
                  </Card>
                </Col>
              </Row>
            </Container>
          </header>
       </div>

https://codeply.com/p/vbMAhSXkLm

Answer 10

Include overflow-hidden, vh-100, and mh-100 in the styles for the left column...

       <div className="App">
          <header className="App-header">
            <Container className="">
              <Row className="align-items-center overflow-hidden">
                <Col
                  md={4}
                  className="treeViewComponent vh-100 mh-100 overflow-hidden"
                >
                  <Card className="h-100 overflow-auto">
                    <Card.Body>Text goes here</Card.Body>
                    <Card.Footer>
                      <Button>Perform action</Button>
                    </Card.Footer>
                  </Card>
                </Col>
                <Col md={8} className="compressionComponent align-items-center">
                  <Card>
                    <Card.Body>
                      More text here more text here more text here more text here more text
                      here more text here more text here more text here more text{" "}
                    </Card.Body>
                  </Card>
                </Col>
              </Row>
            </Container>
          </header>
       </div>

https://codeply.com/p/vbMAhSXkLm

Tutorial on achieving full screen height for Bootstrap card within a column

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Issue with Bootstrap Navbar dropdown causing page refresh instead of menu dropdown activation

Tips for centering fontawesome icons in your design

Utilizing numerous script elements for three.js library

Is it possible to adjust the width of the comment box on the Facebook "Like" button?

Retrieve the chosen option within the current page

Tips for arranging 3 cards in a straight line across the horizontal axis

The modal feature is malfunctioning on a dynamic Flask website across all web browsers

What is the best way to programmatically select a checkbox that was created dynamically using jQuery?

Change the maximum width of the parent element when it is positioned relatively

What is the appropriate syntax for the second division?

Display a loading GIF for every HTTP request made in Angular 4

Make sure the text fits perfectly without any extra spaces

Neglecting to include an external CSS file within a .aspx content page in an ASP.NET WebForms application

What is the best way to align the logo image in the center of the header vertically?

To retrieve data with Bootstrap modal, simply pass the ID to the URL and utilize it for querying in the Laravel controller

Update the CSS of a different element when hovering

Incorporate Arabic typography into the React Material Theme

Ensuring the height of the HTML element for menu items matches the navigation bar

Optimal method for retrieving data in JSON format

How to create a clickable link that functions as a file upload button