Как в bootstrap сделать шапку на всю ширину а дочерние элементы выстраивать по сетке?

Question

[iinegve]

Во многих сайтах весь контент выстроен по сетке, а шапка, скорее всего её див распластывается на всю ширину.

Это пример из интернета, содержимое шапки по сетке, а сам див шапки на всю ширину.
У меня так не получается, либо шапка с содержимым на всю ширину, либо всё по сетке. Контролируется добавлением слова fluid
Я могу наколхозить с отступами, или создать container fluid с абсолютным позиционированием, а на него уже наложить свою сетку, т.е. обычный container, но хочется сделать красиво и как правильно.
Код в React

<Container fluid>
        <Row className={styles.header}>
          <Col className='d-flex justify-content-start align-items-center'>
            <Row>
              <Col><Logo></Logo></Col>
              <Col><Search placeholder='Search'></Search></Col>
            </Row>
          </Col>
          <Col className='d-flex justify-content-end align-items-center'>
            <Navigation pages={headerPages} separatePage={headerPages[2]}></Navigation>
            <Cart></Cart>
            <ProfileIcon alt={'avatar'} url={'/user/img.png'}></ProfileIcon>
          </Col>
        </Row>
      </Container>

Итого шапка и все дочерние элементы вне сетки(

Answer 1

[FKV]

Просто оберните контейнер в див или header и задайте обертке цвет. Только уберите у контейнера fluid.