Visible/hidden texts for responsive content in Bootstrap and other frameworks

Let’s say that we are using Bootstrap framework and we need some changes in our content related to device screen size.

We may have 2 div boxes which are alongside in wide screen, and one on another in mobile screen.

In such cases some texts in our content may be unclear.

For example 

Screenshot from 2016-03-15 09:32:12

See the bold text in the example. It seems ok now. But if to open same content in mobile device we will get

Screenshot from 2016-03-15 09:32:46

You see, in this example the text “at the right” is inaccurate. As it is the only problem in this case, we don’t need to create another div for smaller screen. We just need to set responsive text there. Let’s do it:

We just change “at the right box” to “<span class=’hidden-md hidden-lg’>at the next box below</span><span class=’hidden-xs hidden-sm’>at the right box</span>”.

Screenshot from 2016-03-15 09:38:08

What we will get let’s see

Screenshot from 2016-03-15 09:32:12

in wide screen. And

Screenshot from 2016-03-15 09:37:46

I think the main principe is clear. With such little tricks we can escape serious html restructuring in most cases. We can do this trick even in WordPress text editor. So there will not be any need to edit theme files to adjust device sensitive texts.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.