1

In most of the Drupal themes I find the IDs #page and #page-wrapper, but it is not available in the Bootstrap theme.

I tried to find in theme, but maximum I could find is class .container but is covers only that particulate section i.e. header, main-content, footer.

Is there any ID or class in Bootstrap theme which covers entire webpage like #page does in almost all other themes OR if there is not how can I add that?

To experiment, I did try to add following to page.tpl.php like other themes,

<div id="page-wrapper">
  <div id="page">

And added following CSS to check,

#page {
    border: 5px solid red;
}
#page-wrapper {
    border: 5px solid blue;
}

But it applies to border of the browser not to actual width of the page as shown in the following image.

enter image description here

Hence looks like this way we can not add this to Bootstrap theme.

Any idea or suggestion how to apply #page and #page-wrapper to Bootstrap theme? Thanks.

  • No, there isn't any id or wrapper equivalent to #page or #page-wrapper. Saying so, what is exactly you are trying to achieve? – Malabya Tewari Aug 23 '16 at 19:04
  • @MalabyaTewari In process of styling the theme. I wan to add the page-border and other stuff around the entire-webpage, So I need some Id or class which represent that. In all other theme, most of it is #page and #page-wrapper, but as you said it is not available, might be equivalent also not available. Even I try to add by looking at otehr theme as mentioned in my question. is there way to add? – CodeNext Aug 23 '16 at 19:10
1

After several try and error method, I did find the solution for this.

For a note, I am using LESS.

Step-1: Add a <div> to page.tpl.php

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

<div id="page-wrapper">
  <div id="page">

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 <div> 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.

enter image description here

Further Any suggestion or comment are welcome.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.