Is there away that i can use only html to center these nave links without having to do a css code?
nav link are align left, would want to bring them center of the webpage.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<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" role="presentation">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
You can just add .justify-content-center to the .nav to center those nav links, since the .nav is already displayed as a flexbox:
<ul class="nav nav-tabs justify-content-center">
...
</ul>
...
demo: https://jsfiddle.net/davidliang2008/g1fn7smr/2/
Related
I am using bootstrap for creating a tab list like below one:
The problem is that when I click on "Profile" or Contact, it changes nothing. I included the bootstrap library. I mean it doesn't remove the 'active', 'show' classes. Does someone know why?
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="nav nav-tabs" id="myTab" 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="profile-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="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
Somewhat unsure which approach you're after. This can work out of the box with Bootstrap 5 but you also tag this with Bootstrap 4.
For version 5 they changed:
data-toggle
to
data-bs-toggle
Here is the approach with no additions and uses Bootstrap 5. Note your code example brings in jQuery and that isn't needed.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" aria-controls="home" aria-selected="true" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu1">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu2">Contact</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-controls="home">
Home
</div>
<div class="tab-pane fade" id="menu1" role="tabpanel" aria-controls="profile">
Profile
</div>
<div class="tab-pane fade" id="menu2" role="tabpanel" aria-controls="contact">
Contact
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
Used below script and worked smoothly
$('#myTab a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
})
I have tried looking up how to use nav-fill to make the nav-pills extend the width of the card, but this function doesn't work at all for me. Even the copy pasted code from the documentation doesn't work. It displays the buttons but doesn't apply the nav-fill. Here is my code below:
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs nav-pills nav-fill mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role = "presentation">
<a class="nav-item nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item" role = "presentation">
<a class="nav-item nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role = "presentation">
<a class="nav-item nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
i can't navigate into tabs pages only it show in URL (myweb/pages#tab1 .. myweb/pages/#tab2 ..)
please help me
enter image description here
<div class="card-body">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link " id="home-tab" data-toggle="tab" href="#page1" role="tab" aria-controls="page1"
aria-selected="true">page one</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#page2" role="tab" aria-controls="page2"
aria-selected="false">page two</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#page3" role="tab" aria-controls="page3"
aria-selected="false">page three</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="page1" role="tabpanel">
page one
</div>
<div class="tab-pane fade" id="page2" role="tabpanel" >
page two
</div>
<div class="tab-pane fade" id="page3" role="tabpanel">
page three
</div>
</div>
</div>
</div>
Try this :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
Bootstrap from that link work perfect for my and i try this on your problem and i can navigate
I am new to bootstrap and want to have nav pills in my navigation bar to switch the content of the page (like tabs). Without the navbar it is working, but i would like to have it in my navbar.
This is my code so far:
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<span class="navbar-brand mb-0 h1">ioBroker</span>
<ul class="navbar-nav nav-pills">
<li class="nav-item active">
<a class="nav-link active" id="tab-1" data-toggle="tab" role="tab" href="#content-1" aria-selected="true" aria-controls="content-1">Content 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-2" data-toggle="tab" role="tab" href="#content-2" aria-selected="false" aria-controls="content-2">Content 2</a>
</li>
</ul>
</nav>
<main role="main" class="container-full">
<div class="container-full">
<div class="tab-content">
<div class="tab-pane fade show active" id="content-1" aria-labelledby="tab-1" role="tabpanel">Content 1</div>
<div class="tab-pane fade" id="content-2" aria-labelledby="tab-2" role="tabpanel">Content 2</div>
</div>
</div>
</main>
The issue i have, is that i can't switch back to an already opened "tab". I fi remove the "data-toggle" property, it works for the buttons, but not for the content switching.
Add the nav class to the nav-pills, and the content switching will work as expected for Tabs...
<ul class="navbar-nav nav nav-pills">
<li class="nav-item active">
<a class="nav-link active" id="tab-1" data-toggle="tab" role="tab" href="#content-1" aria-selected="true" aria-controls="content-1">Content 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-2" data-toggle="tab" role="tab" href="#content-2" aria-selected="false" aria-controls="content-2">Content 2</a>
</li>
</ul>
Demo: https://www.codeply.com/go/Xr6tLFbqKj
I am using below code for BootStrap 4 tab.
<ul class="nav nav-tabs font-weight-bold">
<li class="nav-item">
<a class="nav-link active" href="#details" data-toggle="tab">Page Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#content" data-toggle="tab">Page Content</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="details">Page Details</div>
<div role="tabpanel" class="tab-pane fade" id="content">Page Content</div>
</div>
How can I make it responsive so that I can see this tabs even in 100px height and 100px width ?
use this
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
latest bootstrap 4.+ update of navs, works on every screensize
Will shrink to horizontal view if u go below 300px
link for latest bootstrap version
https://getbootstrap.com/