Timo Timo - 2 months ago 12
CSS Question

Bootstrap, break a column out the container

I want two

col-*-6
in one
.row
. The left
col
has a
background-color
which has to go all the way to the left border of the screen. Also there is text in the first
col
, which has to be aligned with the normal
.container
with. The right
col
has a
background-image
which has to go all the way to the right border of the screen.

here is a image example of I want to achieve.
This is the current code that I have, without all the unnecessary elements:

<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-6 text">
<h2>Lorem ipsum dolor sit amet, consectetur elit, sed do lorem ipsum.</h2>
</div> <!-- close col-md-6 text -->
<div class="col-md-6 image" id="slided01">
</div> <!-- close col-md-6 image -->
</div> <!-- close row -->
</div><!-- close container-fluid -->


The problem with the above code is that the text is aligned to the left side of the screen, because of the
.container-fluid
. And I want the text to be aligned with the normal
.container
width.

Here is the JsFiddle. The first row is how I want the background to be, the second row is how I want the text to be.

Answer

You could absolute position the container-fluid under the container, and use CSS to keep the heights of both containers the same.

.abs {
  position: absolute;
  top: 0;
  left:0;
  z-index:-1;
  bottom:0;
  right:0;
  min-height:100%;
}

http://www.codeply.com/go/pLKx5nEZF6

Comments