CODEWITHSUNDEEP
htmlcssreactjstwitter-bootstrapreactstrap
Thingamajig
Thingamajig

Reputation: 4465

How can I make a Bootstrap container's row background go 100% window width?

I have a container that works well for all sizes so far. It's fixed at its preset Bootstrap width, and it's centered.

I want to make the background color of a row stretch full width of the window, rather than the container.

Currently I have this basic structure:

<Container>

  <Row>
    <Col>

      data

    </Col>
  </Row>

  <Row style={{backgroundColor: 'grey'}}> //This should be 100% window width
    <Col>

      data

    </Col>
  </Row>

  <Row>
    <Col>

      data

    </Col>
  </Row>

</Container>

(by the way, using Components rather than <div class=""> as it's Reactstrap)

Upvotes: 1

Views: 1164

Answers (1)

Matthew Weeks
Matthew Weeks

Reputation: 1028

If you want to keep the row inside the container, you can add calculated negative margin to the row with css like the following:

.row {
  background-color: red;
  margin-left: calc((100vw - 100%) / -2) !important;
  padding-left: calc((100vw - 100%) / 2);
  margin-right: calc((100vw - 100%) / -2) !important;
  padding-right: calc((100vw - 100%) / 2);
}

See the following example:

.example-container {
  margin-left: auto;
  margin-right: auto;
  width: 150px;
}

.row{
  background-color: red;
  margin-left: calc((100vw - 100%) / -2) !important;
  padding-left: calc((100vw - 100%) / 2);
  margin-right: calc((100vw - 100%) / -2) !important;
  padding-right: calc((100vw - 100%) / 2);
}

.col {
  background-color: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="example-container">
  <div class="row">
    <div class="col">
      Column 1
    </div>
    <div class="col">
      Column 2
    </div>
  </div>
</div>

Upvotes: 3

Related Questions