[Resolved] Using Bootstrap Responsive utilities with Layout

[Author]

Posts

[Robert Campbell]

I am developing a complex home page which needs to reformat depending on the device screen resolution.

Prior to using Toolset Layouts, I would select between different views using Toolset's responsive utilities.

So on a single WordPress page;

visible-xs would called View 1
visible-sm would call View 2
visible-md would call View 3
etc.

This was a powerful way to call the correct view for a page depending upon the device screen resolution.

Is there any way to select between different Toolset Layouts by a similar method?

I realise that I could combine multiple page layouts within a single Toolset Layout by wrapping Layout rows in DIVs to control the Toolset responsive utilities, but this make page loading very slow when the page layout has many elements.

Your advice would be appreciated.

Regards

Robert

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Robert

I may have misinterpreted your question, but I'm not sure you are using the responsive utility classes the right way (forgive me if I have you wrong).

They are a feature of Bootstrap, and the documentation for them is here: hidden link

You can use them to show or hide content according to the device screen width, e.g. you might wrap a section in a div with a class="hidden-xs" so that it is not displayed on the smallest screens.

But. This is all just CSS that affects how things are rendered onscreen, once things have already been shipped to the browser.

Where you write...

visible-xs would call View 1
visible-sm would call View 2
visible-md would call View 3

the "would call" part doesn't really make much sense.

If you have a page where you add View 1 wrapped in a container div with a class to show it on xs screens, and then you add View 2 wrapped in another div with class visible-sm to show it on small screens, and you add View 3 wrapped in another div with class visible-md, then that does not send View 1 to xs devices, View 2 to small devices, View 3 to medium devices etc.

What it does is sent all versions of your site (Views 1, 2, 3 and more if there are others) to the browser, and then the browser then determines which one will be rendered based upon those utility classes.

Using Layouts or not is not going to make any difference here.

The right way to do this is to generate one version of the page markup that covers each of your screen sizes, where the classes you add to the markup mean that the page will render differently according to screen size.

That is too big a topic for me to cover here, you will need to research designing responsive sites with Bootstrap. If you google "bootstrap page builder" you will find several tools that allow you to design a page layout with variants for different screen sizes. You could experiment with those and inspect the markup and classes that they generate to get the idea.

Again, if I have misunderstood what you have written then let me know.

[Robert Campbell]

Hi Nigel

I think you understand my question pretty well, but let me try to clarify what I'm trying to achieve;

Can you have a look to one of my dev sites at hidden link This uses the Toolset Starter Theme.

If you start to reduce the width of your browser, you will see that the columns reduce in width as expected. The problem is I end up with very narrow columns (before they eventually stack to a single column display). These narrow columns make text content less attractive and more difficult to read.

What I want to happen is for the right hand column (with the adverts and the tweets) to wrap first and tuck itself as a row under the first two columns.

If you have a look at hidden link (and reduce the width of your browser) you will see that the right hand column content wraps into the row below. This is the type of operation I'm trying to achieve for my own audio times news site.

The only way I could think to make this happen was to create multiple page layouts and then have them switch using the bootstrap visible and hidden responsive utilities as I describe in my last post.

I would appreciate your advice on how best to approach the type of responsive display I'm seeking to achieve.

Regards

Robert

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Robert

When using Bootstrap (and most other CSS grid systems) you apply multiple classes to the same content to specify how that content should display according to the current screen width.

Here is a simple example:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <p>Some content in left col here</p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <p>Some content in middle col here</p>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4">
      <p>Some content in right col here</p>
    </div>
  </div>
</div>

There are 3 columns. On the smallest screens, each section will take up 12 of the 12 grid columns, i.e. will be full width.

On desktops screens (col-md-*) they will each take up 4 of 12 grid columns, i.e. which each be one third of the width.

On intermediate sized screens (col-sm-*) the left and middle column will take up 50% of the width (6 of 12) while the right column will become full-width (and so drop down beneath the first two columns).

I made a quick demo where you can see it in action when you resize your browser:

hidden link

[Robert Campbell]

Hi Nigel
Your explanation and example are really helpful, thanks. I found I could place the multiple classes in the Toolset Layout cell optional tag classes and it seems to work just fine.

This has moved me along quite a way, so thanks again.

Robert