CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
chandan
chandan

Reputation: 1574

Bootstrap 3: Extending div outside container on right side

I'm trying to make a layout which needs a div to extend it outside the .container div only on the right side.

Here's the fiddle: http://jsfiddle.net/krish7878/c5n365ek/1/

HTML Code:

<div class="container">
    <div class="row">
       <div class="col-lg-6 col-md-6 col-sm-6 left">
           Left Container
        </div><!-- /.col-6 -->
        <div class="col-lg-6 col-md-6 col-sm-6 right">
            Right Container
        </div><!-- /.col-6 -->
    </div><!-- /.row -->
</div><!-- /.container -->

CSS Code:

.left{
    background-color: #999;
    height: 50px;
    padding: 30px 0px;
}
.right{
    background-color: #49c8ff;
    height: 50px;
    padding: 30px 0px;
}

I want the right container with blue background to extend on the right side fully.

Upvotes: 1

Views: 1050

Answers (1)

jmore009
jmore009

Reputation: 12923

Is this what you are looking for? You just need to make the .container width:100% and you can add padding-left 

.container{
  width: 100%;
  padding-left: 120px; //whatever you want
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

FIDDLE

Upvotes: 2

Related Questions