Topic: Pro version breaks nav tabs
With the free version, I was rendering nav tabs inside of a card-block just fine.
When I switch the CSS source to the pro version, it renders the nav items as another card block.
To reproduce this, the only difference is I'm changing the source directory of my CSS references to the pro version. I confirmed the version of MDB as indicated above.
<div class="card card-block">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Upload Form</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#info" role="tab">CSV Source Info</a>
</li>
</ul>
....
Add comment
Ah ok, I thought I was reporting a bug, but it's expected.
I didn't get the impression when evaluating free that pro would break compatible with standard bootstrap features.
Thanks for the reply.
Tabs available only in MDB Pro. MDB Free uses default Bootstrap's tabs. Following the docs you can see you need to add two more classes to your
- element: version of tabs (like tabs-3) and color (like deep-purple). For example:
<!--Card -->
<div class="card card-block">
<ul class="nav nav-tabs tabs-3 deep-purple" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel1" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel2" role="tab">Follow</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel3" role="tab">Contact</a>
</li>
</ul>
</div>
<!--/.Card-->FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags