Container-fluid and container inside one row

Question

How can I make a column within a row have a "col-6" with a "container" and in another "col-6" have a "container-fluid". Sort of like the picture. The code I tried to make is below.

HTML

<div class="main">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 c-1">
          <div class="container">
            <div class="row">
              <div class="teste col-sm-12">aaaaa</div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 c-2">
          <div class="fluid-container">
            <div class="row">
              <div class="teste2 col-sm-12">aaa</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS

.col-sm-6 {
  height: 700px;
}

.c-1 {
  background: #ccc;
}

.c-2 {
  background: #ddd;
}

.teste {
  background: cyan;
}

.teste2 {
  background: blue;
}

Below, as i hope be

Does this answer your question? [Extend bootstrap row outside the container](https://stackoverflow.com/questions/42002070/extend-bootstrap-row-outside-the-container) — Akber Iqbal, Apr 13 '20 at 02:28
@AkberIqbal I think not. It seems not, it is out of the container and uses "before" and position absolute. I wanted something more like a single row, two columns, but one that goes to the end of the screen, does not stay as far as the limit container. But that also has in the same row a column that obeys this rule of the container. Something like. — Hamon Córdova, Apr 13 '20 at 02:41

score 0 · Accepted Answer · answered Apr 13 '20 at 05:42

I recently came across this problem myself. Depending on which version you are on Bootstrap (I used latest Bootstrap 4.4) you can take a look at what I did in a recent project here: https://www.codeply.com/p/0ZqAg6HUHX

I offset the columns to display the column on the right in full width. The code is responsive as well and breaks on mobile view.

The reason this works is because offsetting columns will be pushed to one side. Then add a class of p-0 to the column and you'll have a full width column with no padding. You can check the documentation for more info on this part: https://getbootstrap.com/docs/4.4/layout/grid/#offsetting-columns

Container-fluid and container inside one row

1 Answers1