What is the equivalent of #page & #page-wrapper in Bootstrap theme?
After several try and error method, I did find the solution for this.

For a note, I am using LESS.

Step-1: Add a &lt;div&gt; to page.tpl.php

Add following code in the page.tpl.php file of your sub-theme.

&lt;div id="page-wrapper"&gt;
  &lt;div id="page"&gt;


Step-2: Add the following CSS in the style.less of your sub-theme.

@media(min-width:@screen-sm-min) {
      #page-wrapper {
      width: @container-tablet;
      margin-left: auto;
      margin-right: auto;
      border: 1px solid red; }
    }
@media(min-width:@screen-md-min) {
      #page-wrapper {
      width: @container-desktop;
      margin-left: auto;
      margin-right: auto;
      border: 1px solid red;}
    }
@media(min-width:@screen-lg-min) {   
      #page-wrapper {
      width: @container-large-desktop;
      margin-left: auto;
      margin-right: auto;
      border: 1px solid red;}
    }


So, this way, the added &lt;div&gt; will be in harmony of Responsive theme of bootstrap and it will not displace any other container in the site and will not interfere with the native responsive design of Bootstrap.


  


Further Any suggestion or comment are welcome.