Jump to content


This topic is now archived and is closed to further replies.


Twitter Bootstrap Grid System - XS SPAN 12 - M SPAN 6

Recommended Posts


Hi - I'm familiar with building sites with the Twitter Bootstrap 3 framwork and I’ve now purchased PageLines 2 ... and I cannot figure out how to set up columns to adjust to different view frame widths like I can using the regularly Twitter Bootstrap - i.e.:


<div class="col-md-8 col-sm-12"></div>


Perhaps the answer is obvious - but I haven't caught on just yet - 


Thanks - 



Share this post

Link to post
Share on other sites

Hello Whersfeld 


Please see the guide to using the Responsive Grid in DMS here http://docs.pagelines.com/tutorials/responsive-grid

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 


Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post

Link to post
Share on other sites

Hi Martin - thanks for the quick response -  I have read through the docs there and I'm just unclear about how to set the fallbacks for the grid and there isn't an example in the docs... can I just use the Twitter Bootstrap nomenclature - like:


<div id="mydiv" class="col-sm-12 col-md-4">This goes full width when viewed on a phone... </div>



Share this post

Link to post
Share on other sites

The classes you're using for columns are Bootstrap 3.x, DMS like PageLines Framework uses a heavily customized version of Bootstrap 2.x. Therefore, you're using the wrong classes for the grid, as Martin mentioned, to use the grid for DMS, see our documentation.


We do not support Bootstrap 3.x grid system.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

  • Similar Content

    • DonRicardoRVM
      By DonRicardoRVM+
        First of all, sorry for my bad English.  I am developing an ecommeece with wp, woocommerce, PL5 and quickshop, and I need to do some changes in the simple product grid. I want to change the classes of some divs, but I can't find the templates. 
      Also, I change the grid of the category products pages, but I didn't make it correctly.
      This is the cat archive's: http://globosdemar.com/wp/categoria-producto/camisetas-para-ninos-y-ninas/
      Can you help me?
    • ketri
      By ketri

      I noticed that PL5 uses flexbox for it's responsive grid. I think this is awesome. 
      But now there's a project coming in where I know I'll have to support older crappier browsers as well. Any thoughts on this? Should I only use PL5 for project where we're focused on modern browsers? Or should I use custom CSS to insert a float-based fallback grid..? 

    • janpeeters
      By janpeeters
      Sorry, I got lost in trying to explain my problem properly. I deleted the contents of this post but can't delete the post itself. I'll report back if I've gotten to the bottom.
    • micstepl
      By micstepl+
      the grid function is gone within post!
      all workarounds within PL5 are not possible!!!
      cloning of containers from outsinde > to inside a post/page content do not work container-work within post/page content does not work (same as used outside) DMS bootstrap grid has gone
    • balfred1345
      By balfred1345
      I spent a couple of hours yesterday working with Testimonials, and have found that there is a problem in Grid mode with Chrome. 
      Please see the screenshot here:
      I've set it up to be in two columns, but it will only show as one column as you can see in the screenshot. This is not the case in Firefox. I'm using the most recent version of Chrome for Mac. 
      The screen width that I'm working with on my monitor is 1915px, so... plenty wide to show two columns.
      Please let me know if there is a fix for this.