Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to align tabs to top/right in bootstrap 3?

I need to align bootstrap 3 tabs to right instead of left.

Is it possible with usage of bootstrap css or do I need to use custom css ?

like image 540
chubbyk Avatar asked Jul 24 '14 19:07

chubbyk


People also ask

How do I center align a tab in Bootstrap?

Use the . nav-justified class in Bootstrap to center tabs in Bootstrap.

How do you align tabs in HTML?

Simply add text-align: center to main , and then reset it all on section using text-align:left . It will affect inline-block elements, but not your section being block , though as descendants might inherit it, the reset will take care of that. Save this answer.

How do I align navbar items to the right in Bootstrap 4?

ml-auto class in Bootstrap can be used to align navbar items to the right. The . ml-auto class automatically aligns elements to the right.

What is tab NAV?

Possibly the most common style of navigation in mobile apps is tab-based navigation. This can be tabs on the bottom of the screen or on the top below the header (or even instead of a header).


2 Answers

Use the class .navbar-right to push an element to the right within a navbar, or .pull-right to do the same when not in a navbar.

<ul class="nav nav-tabs navbar-right">     <li class="active"><a href="#">Home</a></li>     <li><a href="#">Tab1</a></li>     <li><a href="#">Tab2</a></li> </ul> 

Good to know the other helper-classes here too: http://getbootstrap.com/css/#helper-classes

like image 102
Shawn Taylor Avatar answered Sep 18 '22 13:09

Shawn Taylor


use pull-right class:

<ul class="nav nav-tabs">     <li class="active pull-right"><a href="#">Home</a></li>     <li class="pull-right"><a href="#">Tab1</a></li>     <li class="pull-right"><a href="#">Tab2</a></li> </ul> 
like image 24
ShSehati Avatar answered Sep 18 '22 13:09

ShSehati