Sticky footer

[ayozemr]

Hello!

Its possible to create a sticky footer with this library? I have been trying different solutions but any seems to work properly. If I set layout container to "display: flex; flex-direction: column; min-height: 100vh;" so content row has "flex: 1" in order to extend to fill the vertical space.... fluid containers shrink. Any recommended examples for compatibility I see use grid or flex, but the combination of display block and flex this library uses makes difficult to do this basic layout.

I have been checking the documentation but there is no mention to vertical spacing, everything is focused on cols.

I have something like this. The combination of container fluid and container is to be able to have a full width background for header, and menu items boxed in container width of 1300px for example.

The idea is that contentContainer expands vertically so footer is sticky at the bottom of the viewport, so there is no space below the footer.

<div className={styles.layout}>
  <container fluid>
    <Row align={"center"} className={styles.topContainer}>
      <Col>
        <Container className={styles.top}>
          <Row justify="end">
            <Col xs="content">
              {!currentUser && <Link to="/register">register</Link>}
            </Col>
            <Col xs="content">
              {currentUser && (
                <Link to="/user/1">{currentUser.displayName}</Link>
              )}
            </Col>
            <Col xs="content">
              {!currentUser && <Link to="/login">logi</Link>}
              {currentUser && <Link to="/logout">logout</Link>}
            </Col>
          </Row>
        </Container>
      </Col>
    </Row>
  </Container>
  <div className={styles.contentContainer}>{children}</div>
  <Container fluid className={styles.footerContainer}>
    <Container className={styles.footerColsContainer}>
      <Row>
        <Col xxl={3}>
          <Row justify={"center"}>
            <Col xs="content">
              <div>Logo centered</div>
            </Col>
          </Row>
        </Col>
        <Col xxl={9}>
          <Row>
            <Col>
              <Row>
                <Col>
                  <div className={styles.footerColHeading}>
                    col 1 heading
                  </div>
                </Col>
                <Col>
                  <div className={styles.footerColHeading}>
                    col 2 heading
                  </div>
                </Col>
                <Col>
                  <div className={styles.footerColHeading}>
                    col 3 heading
                  </div>
                </Col>
              </Row>
            </Col>
          </Row>
          <Row>
            <Col>
              <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
              </ul>
            </Col>
            <Col>
              <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
              </ul>
            </Col>
            <Col>
              stuff
            </Col>
          </Row>
        </Col>
      </Row>
    </Container>
  </Container>
</div>

I dont know if I am maybe using the library wrong.

Many thanks!

[ayozemr]

I just saw the problem was "margin-left: auto; margin-right: auto" in container fluid styles. Overwriting them with "margin: 0 !important;" with a className, allowed me to use the grid approach.

Is there a prop to prevent that style from applying?

Thanks again