Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: tab set - have one tab right-aligned bootstrap 5

Per Jansson free asked 2 years ago


*Expected behavior*I have several tabs, all left-aligned, but I want ONE of them to be right-aligned. This issue has been lifted here before, but the solutions in the thread "tab set - have one tab right-aligned?" asked by "cdenby" about a year ago only work on Bootstrap 4, not on Bootstrap 5.

Actual behavior All tabs align to the left. In the screenshot there are only two tabs, but there could be any number. The last tab, the one saying "Hjälp" should always be aligned to the right of the card.!

Resources (screenshots, code snippets etc.) Screenshot of card with two tabs, whereof the second should be sitting on the right of the card.


Marcin Luczak staff answered 2 years ago


Hi,

We do not provide any method or component argument for that, as this can be achieved by adding ms-auto class to the .nav-item element you want to push to the right. Nav tabs container is a flex wrapper and you can style every item inside exactly as you would style any other flex item. For more information about flex layout, you can read from our flexbox documentation.

Keep coding, Marcin



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: MAC
  • Browser: Chrome
  • OS: OSC
  • Provided sample code: No
  • Provided link: No