Vertical tabs with content on right - is it possible in BSS?

So my idea was to use the tab component in a column with the tab items set to flex-column to make them show vertically, and then show the tab content in a separate column (to the right on desktop, and then below on mobile.)

But it seems there is no way to move the tab content. It is locked into to the tab component.

Any thoughts (short of converting the whole thing to HTML?)

Like this ?

Yes, but you had to custom code that, correct. I was trying to do it using drag-n-drop components only.

EDIT: Okay, I see... you used the regular nav component and assigned the tab classes to the divs.

I just used the Tabs component and added the row, col-md-3 and col-md-9. Use flex-md-column for desktop.

Okay, I see. You put the Tabs component in a container and then added the row class to the tabs component. That was where I was getting stuck. Thanks, I would have never sussed that on my own.

Hi Folks – I would like to do the same thing and get the gist of your solution. However, the link ( ) doesn’t work any longer. Can you point me to that or some other resource that shows the details? thanks!