Bootstrap 4 tabs not wrapping

Problem happens in alpha 6 but not alpha 5

In bootstrap 3 tabs would wrap onto the next line so they could be used on smaller screen sizes.

In Bootstrap 4 they don't wrap and poke off the side of the screen. This is example from the Bootstrap 4 documentation.

How do i make it wrap like in bootstrap 3?

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<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="#profile" role="tab">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel">...</div>

  <div class="tab-pane" id="profile" role="tabpanel">...</div>

  <div class="tab-pane" id="messages" role="tabpanel">...</div>

  <div class="tab-pane" id="settings" role="tabpanel">...</div>

</div>



</div>

(black outline shows small viewport. On previous version the tabs would wrap to new line so all would be visible inside the black line)

edited Mar 16 '17 at 23:23

asked Mar 16 '17 at 20:09

Guerrilla

2,97783888

add a comment |

Problem happens in alpha 6 but not alpha 5

In bootstrap 3 tabs would wrap onto the next line so they could be used on smaller screen sizes.

In Bootstrap 4 they don't wrap and poke off the side of the screen. This is example from the Bootstrap 4 documentation.

How do i make it wrap like in bootstrap 3?

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<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="#profile" role="tab">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel">...</div>

  <div class="tab-pane" id="profile" role="tabpanel">...</div>

  <div class="tab-pane" id="messages" role="tabpanel">...</div>

  <div class="tab-pane" id="settings" role="tabpanel">...</div>

</div>



</div>

(black outline shows small viewport. On previous version the tabs would wrap to new line so all would be visible inside the black line)

edited Mar 16 '17 at 23:23

asked Mar 16 '17 at 20:09

Guerrilla

2,97783888

add a comment |

Problem happens in alpha 6 but not alpha 5

In bootstrap 3 tabs would wrap onto the next line so they could be used on smaller screen sizes.

In Bootstrap 4 they don't wrap and poke off the side of the screen. This is example from the Bootstrap 4 documentation.

How do i make it wrap like in bootstrap 3?

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<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="#profile" role="tab">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel">...</div>

  <div class="tab-pane" id="profile" role="tabpanel">...</div>

  <div class="tab-pane" id="messages" role="tabpanel">...</div>

  <div class="tab-pane" id="settings" role="tabpanel">...</div>

</div>



</div>

(black outline shows small viewport. On previous version the tabs would wrap to new line so all would be visible inside the black line)

edited Mar 16 '17 at 23:23

asked Mar 16 '17 at 20:09

Guerrilla

2,97783888

Problem happens in alpha 6 but not alpha 5

In bootstrap 3 tabs would wrap onto the next line so they could be used on smaller screen sizes.

In Bootstrap 4 they don't wrap and poke off the side of the screen. This is example from the Bootstrap 4 documentation.

How do i make it wrap like in bootstrap 3?

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<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="#profile" role="tab">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel">...</div>

  <div class="tab-pane" id="profile" role="tabpanel">...</div>

  <div class="tab-pane" id="messages" role="tabpanel">...</div>

  <div class="tab-pane" id="settings" role="tabpanel">...</div>

</div>



</div>

(black outline shows small viewport. On previous version the tabs would wrap to new line so all would be visible inside the black line)

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<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="#profile" role="tab">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel">...</div>

  <div class="tab-pane" id="profile" role="tabpanel">...</div>

  <div class="tab-pane" id="messages" role="tabpanel">...</div>

  <div class="tab-pane" id="settings" role="tabpanel">...</div>

</div>



</div>

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<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="#profile" role="tab">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel">...</div>

  <div class="tab-pane" id="profile" role="tabpanel">...</div>

  <div class="tab-pane" id="messages" role="tabpanel">...</div>

  <div class="tab-pane" id="settings" role="tabpanel">...</div>

</div>



</div>

css twitter-bootstrap twitter-bootstrap-4

edited Mar 16 '17 at 23:23

asked Mar 16 '17 at 20:09

Guerrilla

2,97783888

edited Mar 16 '17 at 23:23

asked Mar 16 '17 at 20:09

Guerrilla

2,97783888

edited Mar 16 '17 at 23:23

asked Mar 16 '17 at 20:09

Guerrilla

2,97783888

asked Mar 16 '17 at 20:09

Guerrilla

2,97783888

asked Mar 16 '17 at 20:09

Guerrilla

2,97783888

add a comment |

4 Answers
4

active

oldest

votes

Nav tabs, like other components are now flexbox. Just use flex-wrap.

<ul class="nav nav-tabs flex-wrap" 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="#profile" role="tab">Profile</a>

        </li>

        ...

</ul>

http://www.codeply.com/go/hGPyyOv76W

I don't think it's an "issue", but rather "by design".

Another, maybe more responsive, approach would be to use flex-column, but only on xs widths. This way is stacks vertically instead of wrapping.

<ul class="nav nav-tabs flex-column flex-md-row" 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="#profile" role="tab">Profile</a>

         </li>

         ...

</ul>

Demo

edited Mar 17 '17 at 13:13

answered Mar 17 '17 at 12:49

Zim

197k51414396

add a comment |

Seems to be an issue specific to the version of Bootstrap 4 you are using:

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist">

  <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="#profile">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#messages">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#settings">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel">...</div>

  <div class="tab-pane" id="profile" role="tabpanel">...</div>

  <div class="tab-pane" id="messages" role="tabpanel">...</div>

  <div class="tab-pane" id="settings" role="tabpanel">...</div>

</div>



</div>

answered Mar 16 '17 at 20:28

APAD1

10.2k52962

Thanks. I used the version on the bootstrap website. Weird this happens.

– Guerrilla
Mar 16 '17 at 20:52

1

It's still in Alpha, so there are bound to be some issues here and there

– APAD1
Mar 16 '17 at 20:59

1

Yeah, I reported on their github page. I'll use this version from now on.

– Guerrilla
Mar 16 '17 at 21:06

add a comment |

For Bootstart 4.1.3 don't forget to include popper.js e.g.

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

At the moment the W3school example is missing the aria-controls. This example worked for me:

<div class="container">

  <h2>Navigation Tabs</h2>

  <p>Turn the nav menu into navigation tabs with the .nav nav-tabs class. Add the active class to the active/current link. If you want the tabs to be togglable, see the last example on the tutorial page.</p>

  <ul class="nav nav-tabs" id="myTab" role="tablist">

  <li class="nav-item">

    <a class="nav-link active" id="homes-tab" data-toggle="tab" href="#homes" role="tab" aria-controls="homes" aria-selected="true">Home</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="profiles-tab" data-toggle="tab" href="#profiles" role="tab" aria-controls="profiles" aria-selected="false">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="contacts-tab" data-toggle="tab" href="#contacts" role="tab" aria-controls="contacts" aria-selected="false">Contact</a>

  </li>

</ul>

<div class="tab-content" id="myTabContent">

  <div class="tab-pane fade show active" id="homes" role="tabpanel" aria-labelledby="homes-tab">home</div>

  <div class="tab-pane fade" id="profiles" role="tabpanel" aria-labelledby="profiles-tab">profile</div>

  <div class="tab-pane fade" id="contacts" role="tabpanel" aria-labelledby="contacts-tab">contact</div>

</div>

answered Nov 16 '18 at 9:51

zukunft.com

add a comment |

If you add popper.js, the id and the aria-controls as documented it seems to work:

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist">

  <li class="nav-item">

    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="profiles-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">home</div>

  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">profile</div>

  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">messages</div>

  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">settings</div>

</div>



</div>

answered Nov 16 '18 at 10:04

zukunft.com

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f42843854%2fbootstrap-4-tabs-not-wrapping%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

Nav tabs, like other components are now flexbox. Just use flex-wrap.

<ul class="nav nav-tabs flex-wrap" 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="#profile" role="tab">Profile</a>

        </li>

        ...

</ul>

http://www.codeply.com/go/hGPyyOv76W

I don't think it's an "issue", but rather "by design".

Another, maybe more responsive, approach would be to use flex-column, but only on xs widths. This way is stacks vertically instead of wrapping.

<ul class="nav nav-tabs flex-column flex-md-row" 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="#profile" role="tab">Profile</a>

         </li>

         ...

</ul>

Demo

edited Mar 17 '17 at 13:13

answered Mar 17 '17 at 12:49

Zim

197k51414396

add a comment |

Nav tabs, like other components are now flexbox. Just use flex-wrap.

<ul class="nav nav-tabs flex-wrap" 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="#profile" role="tab">Profile</a>

        </li>

        ...

</ul>

http://www.codeply.com/go/hGPyyOv76W

I don't think it's an "issue", but rather "by design".

Another, maybe more responsive, approach would be to use flex-column, but only on xs widths. This way is stacks vertically instead of wrapping.

<ul class="nav nav-tabs flex-column flex-md-row" 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="#profile" role="tab">Profile</a>

         </li>

         ...

</ul>

Demo

edited Mar 17 '17 at 13:13

answered Mar 17 '17 at 12:49

Zim

197k51414396

add a comment |

Nav tabs, like other components are now flexbox. Just use flex-wrap.

<ul class="nav nav-tabs flex-wrap" 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="#profile" role="tab">Profile</a>

        </li>

        ...

</ul>

http://www.codeply.com/go/hGPyyOv76W

I don't think it's an "issue", but rather "by design".

Another, maybe more responsive, approach would be to use flex-column, but only on xs widths. This way is stacks vertically instead of wrapping.

<ul class="nav nav-tabs flex-column flex-md-row" 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="#profile" role="tab">Profile</a>

         </li>

         ...

</ul>

Demo

edited Mar 17 '17 at 13:13

answered Mar 17 '17 at 12:49

Zim

197k51414396

Nav tabs, like other components are now flexbox. Just use flex-wrap.

<ul class="nav nav-tabs flex-wrap" 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="#profile" role="tab">Profile</a>

        </li>

        ...

</ul>

http://www.codeply.com/go/hGPyyOv76W

I don't think it's an "issue", but rather "by design".

Another, maybe more responsive, approach would be to use flex-column, but only on xs widths. This way is stacks vertically instead of wrapping.

<ul class="nav nav-tabs flex-column flex-md-row" 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="#profile" role="tab">Profile</a>

         </li>

         ...

</ul>

Demo

edited Mar 17 '17 at 13:13

answered Mar 17 '17 at 12:49

Zim

197k51414396

edited Mar 17 '17 at 13:13

answered Mar 17 '17 at 12:49

Zim

197k51414396

answered Mar 17 '17 at 12:49

Zim

197k51414396

answered Mar 17 '17 at 12:49

Zim

197k51414396

add a comment |

Seems to be an issue specific to the version of Bootstrap 4 you are using:

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist">

  <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="#profile">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#messages">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#settings">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel">...</div>

  <div class="tab-pane" id="profile" role="tabpanel">...</div>

  <div class="tab-pane" id="messages" role="tabpanel">...</div>

  <div class="tab-pane" id="settings" role="tabpanel">...</div>

</div>



</div>

answered Mar 16 '17 at 20:28

APAD1

10.2k52962

Thanks. I used the version on the bootstrap website. Weird this happens.

– Guerrilla
Mar 16 '17 at 20:52

1

It's still in Alpha, so there are bound to be some issues here and there

– APAD1
Mar 16 '17 at 20:59

1

Yeah, I reported on their github page. I'll use this version from now on.

– Guerrilla
Mar 16 '17 at 21:06

add a comment |

Seems to be an issue specific to the version of Bootstrap 4 you are using:

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist">

  <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="#profile">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#messages">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#settings">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel">...</div>

  <div class="tab-pane" id="profile" role="tabpanel">...</div>

  <div class="tab-pane" id="messages" role="tabpanel">...</div>

  <div class="tab-pane" id="settings" role="tabpanel">...</div>

</div>



</div>

answered Mar 16 '17 at 20:28

APAD1

10.2k52962

Thanks. I used the version on the bootstrap website. Weird this happens.

– Guerrilla
Mar 16 '17 at 20:52

1

It's still in Alpha, so there are bound to be some issues here and there

– APAD1
Mar 16 '17 at 20:59

1

Yeah, I reported on their github page. I'll use this version from now on.

– Guerrilla
Mar 16 '17 at 21:06

add a comment |

Seems to be an issue specific to the version of Bootstrap 4 you are using:

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist">

  <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="#profile">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#messages">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#settings">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel">...</div>

  <div class="tab-pane" id="profile" role="tabpanel">...</div>

  <div class="tab-pane" id="messages" role="tabpanel">...</div>

  <div class="tab-pane" id="settings" role="tabpanel">...</div>

</div>



</div>

answered Mar 16 '17 at 20:28

APAD1

10.2k52962

Seems to be an issue specific to the version of Bootstrap 4 you are using:

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist">

  <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="#profile">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#messages">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#settings">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel">...</div>

  <div class="tab-pane" id="profile" role="tabpanel">...</div>

  <div class="tab-pane" id="messages" role="tabpanel">...</div>

  <div class="tab-pane" id="settings" role="tabpanel">...</div>

</div>



</div>

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist">

  <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="#profile">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#messages">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#settings">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel">...</div>

  <div class="tab-pane" id="profile" role="tabpanel">...</div>

  <div class="tab-pane" id="messages" role="tabpanel">...</div>

  <div class="tab-pane" id="settings" role="tabpanel">...</div>

</div>



</div>

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist">

  <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="#profile">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#messages">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" data-toggle="tab" href="#settings">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel">...</div>

  <div class="tab-pane" id="profile" role="tabpanel">...</div>

  <div class="tab-pane" id="messages" role="tabpanel">...</div>

  <div class="tab-pane" id="settings" role="tabpanel">...</div>

</div>



</div>

answered Mar 16 '17 at 20:28

APAD1

10.2k52962

answered Mar 16 '17 at 20:28

APAD1

10.2k52962

answered Mar 16 '17 at 20:28

APAD1

10.2k52962

answered Mar 16 '17 at 20:28

APAD1

10.2k52962

Thanks. I used the version on the bootstrap website. Weird this happens.

– Guerrilla
Mar 16 '17 at 20:52

1

It's still in Alpha, so there are bound to be some issues here and there

– APAD1
Mar 16 '17 at 20:59

1

Yeah, I reported on their github page. I'll use this version from now on.

– Guerrilla
Mar 16 '17 at 21:06

add a comment |

Thanks. I used the version on the bootstrap website. Weird this happens.

– Guerrilla
Mar 16 '17 at 20:52

1

It's still in Alpha, so there are bound to be some issues here and there

– APAD1
Mar 16 '17 at 20:59

1

Yeah, I reported on their github page. I'll use this version from now on.

– Guerrilla
Mar 16 '17 at 21:06

Thanks. I used the version on the bootstrap website. Weird this happens.

– Guerrilla
Mar 16 '17 at 20:52

It's still in Alpha, so there are bound to be some issues here and there

– APAD1
Mar 16 '17 at 20:59

Yeah, I reported on their github page. I'll use this version from now on.

– Guerrilla
Mar 16 '17 at 21:06

add a comment |

For Bootstart 4.1.3 don't forget to include popper.js e.g.

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

At the moment the W3school example is missing the aria-controls. This example worked for me:

<div class="container">

  <h2>Navigation Tabs</h2>

  <p>Turn the nav menu into navigation tabs with the .nav nav-tabs class. Add the active class to the active/current link. If you want the tabs to be togglable, see the last example on the tutorial page.</p>

  <ul class="nav nav-tabs" id="myTab" role="tablist">

  <li class="nav-item">

    <a class="nav-link active" id="homes-tab" data-toggle="tab" href="#homes" role="tab" aria-controls="homes" aria-selected="true">Home</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="profiles-tab" data-toggle="tab" href="#profiles" role="tab" aria-controls="profiles" aria-selected="false">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="contacts-tab" data-toggle="tab" href="#contacts" role="tab" aria-controls="contacts" aria-selected="false">Contact</a>

  </li>

</ul>

<div class="tab-content" id="myTabContent">

  <div class="tab-pane fade show active" id="homes" role="tabpanel" aria-labelledby="homes-tab">home</div>

  <div class="tab-pane fade" id="profiles" role="tabpanel" aria-labelledby="profiles-tab">profile</div>

  <div class="tab-pane fade" id="contacts" role="tabpanel" aria-labelledby="contacts-tab">contact</div>

</div>

answered Nov 16 '18 at 9:51

zukunft.com

add a comment |

For Bootstart 4.1.3 don't forget to include popper.js e.g.

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

At the moment the W3school example is missing the aria-controls. This example worked for me:

<div class="container">

  <h2>Navigation Tabs</h2>

  <p>Turn the nav menu into navigation tabs with the .nav nav-tabs class. Add the active class to the active/current link. If you want the tabs to be togglable, see the last example on the tutorial page.</p>

  <ul class="nav nav-tabs" id="myTab" role="tablist">

  <li class="nav-item">

    <a class="nav-link active" id="homes-tab" data-toggle="tab" href="#homes" role="tab" aria-controls="homes" aria-selected="true">Home</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="profiles-tab" data-toggle="tab" href="#profiles" role="tab" aria-controls="profiles" aria-selected="false">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="contacts-tab" data-toggle="tab" href="#contacts" role="tab" aria-controls="contacts" aria-selected="false">Contact</a>

  </li>

</ul>

<div class="tab-content" id="myTabContent">

  <div class="tab-pane fade show active" id="homes" role="tabpanel" aria-labelledby="homes-tab">home</div>

  <div class="tab-pane fade" id="profiles" role="tabpanel" aria-labelledby="profiles-tab">profile</div>

  <div class="tab-pane fade" id="contacts" role="tabpanel" aria-labelledby="contacts-tab">contact</div>

</div>

answered Nov 16 '18 at 9:51

zukunft.com

add a comment |

For Bootstart 4.1.3 don't forget to include popper.js e.g.

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

At the moment the W3school example is missing the aria-controls. This example worked for me:

<div class="container">

  <h2>Navigation Tabs</h2>

  <p>Turn the nav menu into navigation tabs with the .nav nav-tabs class. Add the active class to the active/current link. If you want the tabs to be togglable, see the last example on the tutorial page.</p>

  <ul class="nav nav-tabs" id="myTab" role="tablist">

  <li class="nav-item">

    <a class="nav-link active" id="homes-tab" data-toggle="tab" href="#homes" role="tab" aria-controls="homes" aria-selected="true">Home</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="profiles-tab" data-toggle="tab" href="#profiles" role="tab" aria-controls="profiles" aria-selected="false">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="contacts-tab" data-toggle="tab" href="#contacts" role="tab" aria-controls="contacts" aria-selected="false">Contact</a>

  </li>

</ul>

<div class="tab-content" id="myTabContent">

  <div class="tab-pane fade show active" id="homes" role="tabpanel" aria-labelledby="homes-tab">home</div>

  <div class="tab-pane fade" id="profiles" role="tabpanel" aria-labelledby="profiles-tab">profile</div>

  <div class="tab-pane fade" id="contacts" role="tabpanel" aria-labelledby="contacts-tab">contact</div>

</div>

answered Nov 16 '18 at 9:51

zukunft.com

For Bootstart 4.1.3 don't forget to include popper.js e.g.

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

At the moment the W3school example is missing the aria-controls. This example worked for me:

<div class="container">

  <h2>Navigation Tabs</h2>

  <p>Turn the nav menu into navigation tabs with the .nav nav-tabs class. Add the active class to the active/current link. If you want the tabs to be togglable, see the last example on the tutorial page.</p>

  <ul class="nav nav-tabs" id="myTab" role="tablist">

  <li class="nav-item">

    <a class="nav-link active" id="homes-tab" data-toggle="tab" href="#homes" role="tab" aria-controls="homes" aria-selected="true">Home</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="profiles-tab" data-toggle="tab" href="#profiles" role="tab" aria-controls="profiles" aria-selected="false">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="contacts-tab" data-toggle="tab" href="#contacts" role="tab" aria-controls="contacts" aria-selected="false">Contact</a>

  </li>

</ul>

<div class="tab-content" id="myTabContent">

  <div class="tab-pane fade show active" id="homes" role="tabpanel" aria-labelledby="homes-tab">home</div>

  <div class="tab-pane fade" id="profiles" role="tabpanel" aria-labelledby="profiles-tab">profile</div>

  <div class="tab-pane fade" id="contacts" role="tabpanel" aria-labelledby="contacts-tab">contact</div>

</div>

answered Nov 16 '18 at 9:51

zukunft.com

answered Nov 16 '18 at 9:51

zukunft.com

answered Nov 16 '18 at 9:51

zukunft.com

answered Nov 16 '18 at 9:51

zukunft.com

add a comment |

If you add popper.js, the id and the aria-controls as documented it seems to work:

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist">

  <li class="nav-item">

    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="profiles-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">home</div>

  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">profile</div>

  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">messages</div>

  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">settings</div>

</div>



</div>

answered Nov 16 '18 at 10:04

zukunft.com

add a comment |

If you add popper.js, the id and the aria-controls as documented it seems to work:

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist">

  <li class="nav-item">

    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="profiles-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">home</div>

  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">profile</div>

  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">messages</div>

  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">settings</div>

</div>



</div>

answered Nov 16 '18 at 10:04

zukunft.com

add a comment |

If you add popper.js, the id and the aria-controls as documented it seems to work:

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist">

  <li class="nav-item">

    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="profiles-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">home</div>

  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">profile</div>

  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">messages</div>

  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">settings</div>

</div>



</div>

answered Nov 16 '18 at 10:04

zukunft.com

If you add popper.js, the id and the aria-controls as documented it seems to work:

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist">

  <li class="nav-item">

    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="profiles-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">home</div>

  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">profile</div>

  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">messages</div>

  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">settings</div>

</div>



</div>

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist">

  <li class="nav-item">

    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="profiles-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">home</div>

  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">profile</div>

  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">messages</div>

  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">settings</div>

</div>



</div>

#viewport

{

  width: 200px;

  border: 1px solid #000;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<div id="viewport">

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist">

  <li class="nav-item">

    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="profiles-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>

  </li>

</ul>



<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">home</div>

  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">profile</div>

  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">messages</div>

  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">settings</div>

</div>



</div>

answered Nov 16 '18 at 10:04

zukunft.com

answered Nov 16 '18 at 10:04

zukunft.com

answered Nov 16 '18 at 10:04

zukunft.com

answered Nov 16 '18 at 10:04

zukunft.com

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky