Search code examples
htmlcsstwitter-bootstraptwitter-bootstrap-3multiple-columns

Bootstrap 3 two columns in container with 100% width backgrounds

can anybody help me to make in bootstrap 3 layout with 2 columns with background with 100% width?

Example:

enter image description here

Solution

  • the correct way is set the background to the row width 50% width:

    html:

    <div class="row">
<div class="container">
    <div class="col-xs-6">
        <h1>left</h1>
    </div>

    <div class="col-xs-6">
        <h1>right</h1>
    </div>
</div>
</div>

    CSS:

    .row {
background-color: #e1e2e4;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: 50% 100%;
}

    bootply: http://www.bootply.com/yDCLfN2DSb