How to use panels_bootstrap_layouts?

Question

I am using the bootstrap theme together with panels_bootstrap_layouts. The bootstrap layouts option does show up and I can successfully add my content (2 views) to my panel with boostrap layout (2 colums stacked): one view in the left column and one view in the right column.

My problem is that when I save and view the page, the views are displayed one on top and one on the bottom but never left and right as they are suppose to be even when the browser is at full screen size. The theme seems to correctly be informed of the viewport size because when I resize the browser window to smaller width, then the main menu changes aspect as it is supposed to for smaller screens. My panel however does not change aspect, my views are always top/bottom and never change to left/right.

Is there a setting somewhere I should change in order for panels_bootstrap_layouts to correctly follow the fluid design and rearrange panels according to viewport width?

Answer 1

There a few reason this might be happening

1st is your using a bootstrap 3 theme with bootstrap 2 panel layouts.

The 2nd is your not setting panels with the bootstrap grids width.

After you have choosen the bootstrap stack layout.

1.Click on "Save and update"

2.Then click on the little gear you will see a drop down menu

3.then click on option that say's "Change"

4.Then select the bootstrap layout option

5.Then you will be able to select the column width of the layout

6.Then save.

Then do the same for the other right or left column and now your column will be right or left. You can see example how to do this here

If you want to hide some panels from on a mobile or desktop display, then you need to use bootstrap hide and show classes which you can find here

1.goto panels gear 2.Select css 3.add the "hidden-lg" class to panels on desktop you want to hide or "hidden-sm hidden-xs" to panels you want to hide on mobile or tablet

I hope that helps

Answer 2

turns out that for some reason the bootstrap layouts .php files did NOT use bootstrap "spanX" classes. So I implemented them like this:

 <div class="row-fluid">
    <div class="span6" >
     <?php print $content['left']; ?>
    </div>

    <div class = "span6">
     <?php print $content['right']; ?>
    </div>
 </div>

instead of the original:

<div class="row-fluid"> 
     <?php print $content['left']; ?> 
     <?php print $content['right']; ?>
</div>

in the file modules/contrib/panels_bootstrap_layouts/plugins/layouts/bootstrap_twocol_stacked/bootstrap-twocol-stacked.tpl.php