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;
 
}

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

<div class="container">
        <div class="row">
            <div class="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