"Tabs style 1"
Bootstrap 4.1.1 Snippet by obadasaada

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-xs-12 "> <nav> <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> <a class="nav-item nav-link" id="nav-about-tab" data-toggle="tab" href="#nav-about" role="tab" aria-controls="nav-about" aria-selected="false">About</a> </div> </nav> <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex. </div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex. </div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex. </div> <div class="tab-pane fade" id="nav-about" role="tabpanel" aria-labelledby="nav-about-tab"> Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex. </div> </div> </div> </div> </div> </div> </div>
nav > .nav.nav-tabs{ border: none; color:#fff; background:#272e38; border-radius:0; } nav > div a.nav-item.nav-link, nav > div a.nav-item.nav-link.active { border: none; padding: 18px 25px; color:#fff; background:#272e38; border-radius:0; } nav > div a.nav-item.nav-link.active:after { content: ""; position: relative; bottom: -60px; left: -10%; border: 15px solid transparent; border-top-color: #e74c3c ; } .tab-content{ background: #fdfdfd; line-height: 25px; border: 1px solid #ddd; border-top:5px solid #e74c3c; border-bottom:5px solid #e74c3c; padding:30px 25px; } nav > div a.nav-item.nav-link:hover, nav > div a.nav-item.nav-link:focus { border: none; background: #e74c3c; color:#fff; border-radius:0; transition:background 0.20s linear; }

Related: See More

Paper Kit
Hover Effect Style
Instagram Style User Online
Simple & Clean 404 Error Page style

Questions / Comments:

Hi, my friend.

how to configure the nav-item active to always be highlighted.

Thanks for help!

Biosis-Developer (1) - 5 years ago - Reply 1

Hello

If you want to set any nav-item and tab-content to be active, add 'active' to the class of nav-item and add 'show active' to the class of the related tab-content, thus it will be active each time you open the page. Otherwise, if you want to show the active effect always even you are switching between tabs you should create new custom class and copy the .active class content to it also .active:after . For example

.alwaysactive{

// content

}

.alwaysactive:after{

// content

}

Then add your class to nav-item

Hope it helps

Thank you

obadasaada (-1) - 5 years ago - Reply 1

Ok. Thank you for help!

Biosis-Developer (1) - 5 years ago - Reply 0

Hi there! To keep a nav-item always highlighted as active, you can add the active class to it manually in your HTML or dynamically using JavaScript. If you're working with a framework like Bootstrap, just make sure the active class is applied to the nav-item you want highlighted.

On another note, if you're juggling multiple tasks and need a hand, remember that you can always Pay Someone to Do My Homework in Canada. Expert services are available to help you stay on top of your studies! visit: https://myassignmenthelp.com/ca/pay-someone-to-do-my-homework.html

thomeseliana () - 8 months ago - Reply 0

Hi there! To keep a nav-item always highlighted as active, you can add the active class to it manually in your HTML or dynamically using JavaScript. If you're working with a framework like Bootstrap, just make sure the active class is applied to the nav-item you want highlighted.

On another note, if you're juggling multiple tasks and need a hand, remember that you can always Pay Someone to Do My Homework in Canada. Expert services are available to help you stay on top of your studies!

thomeseliana () - 8 months ago - Reply 0

Hi there! To keep a nav-item always highlighted as active, you can add the active class to it manually in your HTML or dynamically using JavaScript. If you're working with a framework like Bootstrap, just make sure the active class is applied to the nav-item you want highlighted.

On another note, if you're juggling multiple tasks and need a hand, remember that you can always Pay Someone to Do My Homework in Canada. Expert services are available to help you stay on top of your studies!

thomeseliana () - 8 months ago - Reply 0

Hi there! To keep a nav-item always highlighted as active, you can add the active class to it manually in your HTML or dynamically using JavaScript. If you're working with a framework like Bootstrap, just make sure the active class is applied to the nav-item you want highlighted.

On another note, if you're juggling multiple tasks and need a hand, remember that you can always Pay Someone to Do My Homework in Canada. Expert services are available to help you stay on top of your studies! visit here: https://myassignmenthelp.com/ca/pay-someone-to-do-my-homework.html

thomeseliana () - 8 months ago - Reply 0

Hi there! To keep a nav-item always highlighted as active, you can add the active class to it manually in your HTML or dynamically using JavaScript. If you're working with a framework like Bootstrap, just make sure the active class is applied to the nav-item you want highlighted.

On another note, if you're juggling multiple tasks and need a hand, remember that you can always Pay Someone to Do My Homework in Canada. Expert services are available to help you stay on top of your studies! visit here: https://myassignmenthelp.com/ca/pay-someone-to-do-my-homework.html

thomeseliana () - 8 months ago - Reply 0

How would I go about making this responsive? The arrows break on smaller viewports. Thank you.

orangepaw3 (0) - 4 years ago - Reply 0

I copied this into a new page and the tabs don't navigate.

http://jooy.org/one/TabMenu.html

I copied and pasted several times. Tried internal css and external. Different browsers. Still the links don't function. It seems to have all the correct elements, but it's not working.

emsevol (-1) - 5 years ago - Reply -1

1- download full version of bootstrap v.4

download it here -> https://github.com/twbs/bootstrap/releases/download/v4.0.0/bootstrap-4.0.0-dist.zip

2- install jquery v.3.2.* (minimum)

3- insert the following lines of code in order

<link href="bootstrap.min.css" rel="stylesheet" />

<script src="jquery-3.2.1.min.js"></script>

<script src="bootstrap.bundle.min.js"></script>

thank you

obadasaada (-1) - 5 years ago - Reply -2