How do I align Tab Items to the right.

Bootstrap Studio Help
1

If I have Tabs Items I want to align them to the right.If I add a normal Navbar and under options on the right I can click on Nav and set the Alignment between Default, Left or Right. I wish to do this with tabs but the Alignment option doesn't exist for tab items.

2

You'll most likely have to work this out using CSS to manipulate them. The other option would be to use a 3rd party Tabs script which you can find a lot of them at a lot of different sites. Just make sure it's Bootstrap 3 & 4 compatible and you should be fine. Default Bootstrap doesn't support aligning the tabs that I'm aware of (haven't checked in a while though so that may have changed, but I don't think so). Just means you'll have to code it yourself to make them do it. Much easier to use an external 3rd party script that may already have the ability to do it.

3

This would be the CSS that aligns it to the right, but it also reverses the order so you would have to fiddle around with the order you want. So don't let the default wording of First Tab etc... confuse you.

.nav-tabs > li {
  float:right;
}

If you want to maintain the order you'd use this CSS.

.nav-tabs {
  text-align:right;
}

.nav-tabs > li {
  display:inline-block;
  float:none;
}

Now it would be cleaner I would think so use the following if you gave the UL a class of nav-tabs-right and used this CSS.

.nav-tabs-right {
  text-align:right;
}

.nav-tabs-right > li {
  display:inline-block;
  float:none;
}

This way you're not overriding all TAB sections in your site if you didn't want to.

Saj

4

Thanks Jo, thanks Saj,

Both very helpful.