Bootstrap: Container With Absolute Positioning?

I have the following markup:

Solution 1:

You just need an absolute wrapper for your container, instead of making that container absolute, keeping bootstrap clean.

i've modified your jsfiddle to below.. kindly accept if this is what you were looking for, thanks.

/* Latest compiled and minified CSS included as External Resource*//* Optional theme */@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.banner-wrapper {
  width: 100%;
  position: relative;
}

.banner-image {
  width: 100%;
    height: 450px;
    background-color: gray;
}

.absolute-wrapper{
    position: absolute;
    width:100%;
    top:50%;
}

.container {
    text-align: center;
 
}

<divclass="banner-wrapper"><divclass="banner-image"></div><divclass ="absolute-wrapper"><divclass="container"><divclass="row"><divclass="col-xs-12">
                    SOME VERY LONG TEXT IN AN ABSOLUTE DIV
                </div></div></div></div></div><divclass="container"><divclass="row"><divclass="col-xs-12">
                SOME ARBITRARILY LONG TEXT WITH CORRECT MARGINS
            </div></div></div>

Solution 2:

Set background image position:absolute

.banner-image {
  width: 100%;
    height: 450px;
    background-color: gray;
    position:absolute;
}

Share