Bootstrap add box outside container

Question

I have a vanilla release of boostrap 3.

My page is based on this example:

<div id="dashboadMainId" class="container">
    <div class="row">
      <div class="col-md-6">TEST</div>
      <div class="col-md-6">TEST</div>
    </div>
</div>
+---------------------------------------+
|                                       |
|       +-----------+-----------+       |
|       |           |           |       |
|       |           |           |       |
|       |           |           |       |
|       |           |           |       |
|       +-----------+-----------+       |
|                                       |
+---------------------------------------+

On 16:9 screens, I would like to put two boxes (one on the container left, the other on the container right) and make them FIXED when scrolling

+---------------------------------------+
|                                       |
| +---+ +-----------+-----------+ +---+ |
| | L | | aaaaaaaaa | fffffffff | | R | |
| +---+ | bbbbbbbbb | ggggggggg | +---+ |
|       | ccccccccc | hhhhhhhhh |       |
|       | ddddddddd | iiiiiiiii |       |
|       | eeeeeeeee | lllllllll |       |
|       +-----------+-----------+       |
|                                       |
+---------------------------------------+


+---------------------------------------+
| +---+ +-----------+-----------+ +---+ |
| | L | | ccccccccc | hhhhhhhhh | | R | | ^
| +---+ | ddddddddd | iiiiiiiii | +---+ | |
|       | eeeeeeeee | lllllllll |       | |
|       +-----------+-----------+       | |
|                                       |
|                                       |
|                                       |
+---------------------------------------+

Is it possibile?

Answer 1

You can specify multiple column sizes in Bootstrap. The following HTML should get you going

<div id="dashboadMainId" class="container">
    <div class="row">
      <div class="col-lg-1 visible-lg fixed">Left</div>
      <div class="col-md-6 col-lg-5">TEST</div>
      <div class="col-md-6 col-lg-5">TEST</div>
      <div class="col-lg-1 visible-lg fixed">Right</div>
    </div>
</div>

In that example, we're using the responsive utilities (http://getbootstrap.com/css/#responsive-utilities) to only make the left and right columns visible on large screens and the grid options (http://getbootstrap.com/css/#grid-options) to make the central columns 6 wide on medium sized screens and 5 wide on large screens. The left and right columns are 1 wide on large screens.

To make the left and right boxes stay static, you will need to apply position: fixed to them using CSS:

.fixed {
    position: fixed;
}

You may need more styling than that depending on what you're trying to achieve though, but that's essentially how you make something static on a page.