Hiding elements in responsive layout?

Question

Looking through bootstrap it looks like they support collapsing the menubar items for smaller screens. Is there something similar for other items on the page?For example, I have a <h1> along with nav-pills floated right. On a small screen this causes issues. I'd love to at least put it into a similar click-to-show-more dropdown.Is this possible within existing Bootstrap framework?

Answer 1

The easiest way to achieve this if you use the utility classes "d-[*-]none".

You can then have distinct elements showing up responsively.

<p class=".d-none .d-sm-block">This is hidden on etra-small devices</p>

<p class=".d-block .d-sm-none">This is only visible on extra-small devices</p>

So in order to facilitate what you want to achieve (and assuming you want a HTML/CSS only solution), you would create markup for your cases but only show what you want to show depending on screen resolution.

NOTE: in older versions of bootstrap, these classes used to be called "hidden[-*]"