Skip to content
Advertisement

Bootstrap 4 navigation tabs content not showing content on initial page load

On initial page load, the tabs show but the content for that selected tab does not.

If I click the “Link” tab and back to the “Post” tab then it shows up.

<div class="container">
    <div class="card text-center">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" id="tabs">
                <li class="nav-item">
                    <a class="active nav-link" href="#post" data-toggle="tab">Post</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#link" data-toggle="tab">Link</a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content">
                <div class="tab-pane" id="post">post</div>
                <div class="tab-pane" id="link">link</div>
            </div>
        </div>
    </div>
</div>

On page load it looks like this (the div with the tab-pane class hasn’t been displayed):

enter image description here

There are no errors in my console and the bootstrap JS file is loaded. There are some similar questions around but the solutions have not worked for me.

What do I need to add to get the tab pane to display when the page loads?

Advertisement

Answer

Check this out

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="card text-center">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" id="tabs">
                <li class="nav-item">
                    <a class="active nav-link active" href="#post" data-toggle="tab">Post</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#link" data-toggle="tab">Link</a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content">
                <div class="tab-pane active" id="post">post</div>
                <div class="tab-pane" id="link">link</div>
            </div>
        </div>
    </div>
</div>
User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement