CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
jmv
jmv

Reputation: 415

Full width nav tabs in bootstrap 4 alpha

Hello how can make my nav-tabs full width, I tried using width:100%; to no avail. enter image description here

here's the html code that i used.

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#learn" role="tab">Learn More</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#faq" role="tab">Frequently Asked Questions</a>
  </li>
</ul>

Upvotes: 3

Views: 15519

Answers (3)

tmg
tmg

Reputation: 20383

There are build-in css classes to achieve this. From official docs:

To proportionately fill all available space with your .nav-items, use .nav-fill. Notice that all horizontal space is occupied, but not every nav item has the same width.

<ul class="nav nav-tabs nav-fill" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#learn" role="tab">Learn More</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#faq" role="tab">Frequently Asked Questions</a>
  </li>
</ul>

enter image description here

For equal-width elements, use .nav-justified. All horizontal space will be occupied by nav links, but unlike the .nav-fill above, every nav item will be the same width.

<ul class="nav nav-tabs nav-justified" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#learn" role="tab">Learn More</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#faq" role="tab">Frequently Asked Questions</a>
  </li>
</ul>

enter image description here

Upvotes: 13

Saurabh
Saurabh

Reputation: 778

it might be helpful. you do not need to give css to ul.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</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.2.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>Tabs</h3>
    <ul class="nav nav-tabs">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
    <br>
    <p><strong>Note:</strong> This example shows how to create a basic navigation tab. It is not toggleable/dynamic yet (you can't click on the links to display different content)</p>
  </div>

  <h2>Basic Nav-tabs</h2>

  <div class="container">
    <h3>Inline List</h3>
    <ul class="list-inline">
      <li><a href="#">Home</a></li>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </div>
</body>

</html>

Upvotes: 3

Riddhi
Riddhi

Reputation: 777

As per I understood you want to width:100% to <ul class="nav nav-tabs"> right? But by default <ul class="nav nav-tabs"> is in width: 100% you do not need to give css to <ul> but if you want to width: 100% to <li class="nav-item"> then give css to it like this: 

  .nav-item {
     width:100%;
   }

or else instead of text-align: center give <ul class="nav justify-content-center"> to your html.

Upvotes: 5

Related Questions