CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Ben Marles
Ben Marles

Reputation: 1

Bootstrap 3 - 2 columns, full width backgrounds, content within standard container

I am currently learning Bootstrap but have come across an issue that I cannot get my head around.

I have two columns, of which I need the backgrounds to be different colours and full width. But, I need my content to remain within a normal container as per the rest of my layout.

When I use 'container-fluid', my content, as well as my background colours are full width - which I do not want. If I nest a 'container' inside of a 'container-fluid' and 'row', everything is then enclosed within the standard container (backgrounds and all) - which I also do not want.

So my question is, how do I code this grid layout with background colours that are full width and content that is within a normal container in bootstrap 3?

Thanks

The design layout for Mark Up

My poor attempt...

<div class="container-fluid">
  <div class="row">
    <div class="col-md-7 col-md-push-5 bg-danger">ICON</div>
    <div class="col-md-5  col-md-pull-7 bg-success">WEB DEVELOPMENT</div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-7 bg-danger">ICON</div>
    <div class="col-md-5 bg-success">WEB DESIGN</div>
  </div>
</div>

Upvotes: 0

Views: 2527

Answers (1)

lzymla
lzymla

Reputation: 61

i do this like this:

<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

Upvotes: 1

Related Questions