1.

Can Tabs be centered in Bootstrap?

Answer»

Yes, with Bootstrap, you can easily center tabs. The .nav-justified class is used in Bootstrap to center tabs.

The following is an example:

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Tabs</title>   <meta charset="utf-8">   <meta name="VIEWPORT" content="width=device-width, initial-scale=1">   <link rel="stylesheet" HREF="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="CONTAINER">   <h3>Centered Tabs</h3>   <p><strong>Note:</strong> RESIZE the browser window to see the effect. Items look stacked if the screen size if less than 768px</p>   <UL class="nav nav-tabs nav-justified">     <li class="active"><a href="#">Home</a></li>     <li><a href="#">AboutUs</a></li>     <li><a href="#">Company</a></li>   </ul> </div> </body> </html>

The output when the screen size is less than 768px:

The output when the screen size is more than 768px:



Discussion

No Comment Found