In my app I have a set of five tabs, they look great, each has a 2x icon and a description of the content underneath. My problem is that on smaller screens they are way too big. Is there a way to either have different content (in the tab) based on screen size or hide the text? Ideally I'd like alternate text or just the icon when the screen size is "sm" or less.
Did you create a Nav or did you just throw some tabs into a container? If the latter, then you should really use a full Nav element as that already has what you need built into it to do the resizing and collapsing on various sized screens. You'll need to use CSS media queries to alter the sizes of the text if that doesn't fix it using a Nav element, but I think that will take care of your issues all the way around. Good luck!
Just thought I'd throw in that what I mention in my last post is only if you're trying to use it as a Menu or Navigation of the site. If you're just adding a tabs element to a page for organization of your items, then that will automatically wrap when screen sizes get too small for it and then you'll still need to use the CSS media queries for it if you want to alter the text to be different sizes etc. for different screen sizes.
Hi Jo, I have a nav that is just handling simple tabs on my page, each tab has a 2x icon and some text, they look great on a regular screen. On a small screen they stack automatically but the content is such that they are comparitively huge.
I'm experimenting now with using d-hidden and essentially duplicating the tab header content so I have just a small icon on small screens and a large icon plus text on bigger screens.