Question: I am trying to achieve the similar display for the highlighted part in the picture with yellow and black background. The three boxes displaying half in the yellow and half in the black bg.

Can anybody help me deal with it in CSS BOOTSTRAP.

Thanks in advance.

<http://i.stack.imgur.com/yPj0w.png>

Answer: 
The 3 boxes are simply positioned absolutely over a background image.
See this-

```css
#bgbox {
    background-color: black;
    border-left: 50px solid yellow;
    width:50px;
    height:100px;
}
#top {
    position:absolute;
    top:40px;
    left:40px;
    width:30px;
    height:30px;
    background-color:blue;

}
```

```html
<div id="bgbox">
</div>
<div id="top">
</div>
```
use position for doing this.[Demo](http://jsfiddle.net/yousafzainasir9/xswv8a5y/1/)

```
<div class="top">
    <div class="inner"></div>
</div>
<div class="buttom">

</div>

.top{
    position:relative;
    width:100%;
    height:300px;
    background-color:yellow;
}
.inner{
position:absolute;
    width:300px;
    height:300px;
    top:50px;
    left:100px;
    background-color:red;
    z-index:3;

}
.buttom
{
position:relative;

    width:100%;
    height:300px;
    background-color:black;

}

```