How to have 100% of the remaining space in bootstrap?

Question

I am creating an app with react-bootstrap and tried to create a layout. How to use the remaining space in main other than the header and footer?

import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import { Navbar } from "react-bootstrap";

export default function App() {
  return (
    <Row>
      <Col xs={12}>
        <Navbar bg="dark" variant="dark">
          <Navbar.Brand href="#home" className="bold-text">
            NAV
          </Navbar.Brand>
        </Navbar>
      </Col>
      <Col xs={12}>
        <div
          className="mt-4"
          style={{
            backgroundColor: "#cbcbcb"
          }}
        >
          Main Content
        </div>
      </Col>
      <Col xs={12}>
        <Navbar
          fixed="bottom"
          bg="dark"
          variant="dark"
          className="justify-content-md-center"
        >
          <Navbar.Brand href="#home" className="text-center">
            Footer
          </Navbar.Brand>
        </Navbar>
      </Col>
    </Row>
  );
}

Link for Output : https://codesandbox.io/embed/affectionate-noether-hkk6z?fontsize=14&hidenavigation=1&theme=dark

Thanks in Advance

if you see in the output its taking only content height. I want content div to take remaining height — , Aug 01 '21 at 09:35

Carol Skelly · Answer 1 · 2021-08-01T20:29:04.147

As explained in other questions, it's a matter of using the flex grow and height classes. Also, make sure row is inside container. Here's how to apply this to your React app:

     <Container className="vh-100" fluid={true}>
          <Row className="flex-column h-100">
              <Col xs={12}>
                <Navbar bg="dark" variant="dark">
                  <Navbar.Brand href="#home" className="bold-text">
                    NAV
                  </Navbar.Brand>
                </Navbar>
              </Col>
              <Col xs={12} className="flex-grow-1">
                <div
                  className="h-100"
                  style={{
                    backgroundColor: "#cbcbcb"
                  }}
                >
                  Main Content
                </div>
              </Col>
              <Col xs={12}>
                <Navbar
                  fixed="bottom"
                  bg="dark"
                  variant="dark"
                  className="justify-content-md-center"
                >
                  <Navbar.Brand href="#home" className="text-center">
                    Footer
                  </Navbar.Brand>
                </Navbar>
              </Col>
            </Row>
     </Container>

https://codeply.com/p/GrqJKfiNX7

How to have 100% of the remaining space in bootstrap?

1 Answers1