Tab Bric change on smaller breakpoints?

I Need Help
1

Hi – Does anyone know how to make the Tab Bric change to vertical stacking triggers on smaller screens. I know that Bootstrap 4 has this ability…so can it be implemented in Bloc 3?

Thanks.

2

The nav tabs class controls this. Just switch mobile view and bring up nav tabs. Then adjust the width and you can make them any config you need.

Casey

3

Thanks Casey – But I think there is an extra class that makes the Tabs into an Accordion, though it doesn’t work exactly as an Accordion as the Tab triggers stack up vertically, and the content panels open and close below the last Tab trigger.

Here is what the Bootstrap 4 docs says:

"Working with flex utilities

If you need responsive nav variations, consider using a series of flexbox utilities. While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint."

And this it shows the html with the Pills.

4

Here’s what it nav-tabs does?
Casey

18%20AM
Screen Shot 2019-04-16 at 12.18.18 AM.jpg874×1072 164 KB

1 Like
5

Got it. I’ll give it a try. Thanks again.

6

…I should say, that I’m not sure this is the same thing as Bootstrap 4’s notes, as my understanding is that the change occurs automatically by viewport size, so there would be no ‘dimension’ change needed in the Nav-tab class.

7

It is responsive if you don’t want to set the width. Leave the width to the size of the container are using. It will be responsive.

Casey

8

Thanks again Casey…yes, what you suggest is a responsive action for the tabs, but not exactly what the Bootstrap 4 documentation says.

Testing your suggestion, you will see that the all tabs do not stack at once, but incrementally in response to the decreasing size of the window, until all do stack.

My understanding of the Bootstrap 4 documentation is that the intended change once the window reaches a certain size, for example Med or Sm, then all the tabs transform into stacked tabs all at once.

One limitation I see is that this stacking doesn’t become an Accordion, where each tab will have its corresponding content open below it, but rather the tabs stack and all the content areas will be at the bottom of the stack.

Perhaps Im mistaken but that’s what I understand from the documentation and the examples.