CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
JohnWick
JohnWick

Reputation: 5149

Bootstrap Tabbed Nav/Split Dropdown Button Issue

I tried adding a tabbed nav to a page, like this:

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

But it was being displayed incorrectly: enter image description here

So I switch from Bootstrap 4.0.0 to 3.3.7, and it appears properly, but my split dropdown menu button breaks.

enter image description here

    <li class="nav-item">
      <div class="btn-group">
        <button type="button" class="btn btn-primary">{{ session.username }}</button>
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="/get_messages">Messages</a>
          <a class="dropdown-item" href="/get_friend_requests">Friend Requests</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="/logout">Log Out</a>
        </div>
      </div>
    </li>

How can I have both components display correctly? Switching between 4.0.0 and 3.3.7 breaks one or the other.

Upvotes: 1

Views: 441

Answers (1)

Hooman Bahreini
Hooman Bahreini

Reputation: 15559

Nav-tabs work differently in bootstrap version 4, you need:

<ul class="nav nav-tabs">
  <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>

Note sure about this, but bootstrap 4 documentation uses show class for the active tab-content (you may need to replace in with show):

<div id="home" class="tab-pane fade show active">

See here: W3Schools Bootstrap 4 nav-tabs

See here: Bootstrap 4 documentation

Upvotes: 1

Related Questions