Bootstrap add box outside container

css-position, twitter-bootstrap

Solution

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.

Problem

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?

Original source