Using Rails 7 and Bootstrap 5.1
According to this code snippet I managed to get four tabpages. When trying to add a fifth tabpage it is showing only the tab but when clicking on it, the tab seems to be inactiv and it isn't showning any content.
Is the number of tabpages limited to four or do I have to do any configuration?
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home Content</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile Content</div>
<div role="tabpanel" class="tab-pane" id="messages">Messages Content</div>
<div role="tabpanel" class="tab-pane" id="settings">Settings Content</div>
</div>
</div>
Nothing should prevent you from using more than 4 tabs. There should be something wrong in your HTML. Maybe you can also check your console to see if there's anything wrong occurring with the JS.
Also that would be simpler to help if you provide an example of the non-working situation.
Here is a working example using bootstrap 5, with six tabs used.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="other-tab" data-bs-toggle="tab" data-bs-target="#other-tab-pane" type="button" role="tab" aria-controls="other-tab-pane" aria-selected="false">Other</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="yetanother-tab" data-bs-toggle="tab" data-bs-target="#yetanother-tab-pane" type="button" role="tab" aria-controls="yetanother-tab-pane" aria-selected="false">Yet another</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="stillanother-tab" data-bs-toggle="tab" data-bs-target="#stillanother-tab-pane" type="button" role="tab" aria-controls="stillanother-tab-pane" aria-selected="false">Still another</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">A</div>
<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">B</div>
<div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">C</div>
<div class="tab-pane fade" id="other-tab-pane" role="tabpanel" aria-labelledby="other-tab" tabindex="0">D</div>
<div class="tab-pane fade" id="yetanother-tab-pane" role="tabpanel" aria-labelledby="yetanother-tab" tabindex="0">E</div>
<div class="tab-pane fade" id="stillanother-tab-pane" role="tabpanel" aria-labelledby="stillanother-tab" tabindex="0">F</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
Related
Navbar Toggle is not working with Bootstrap 5.2. The hamburger button shows correctly when screen is small but when I click on button the nav items don't appare. Any suggestion?
`
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<div class="container-fluid">
Tech Blog
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"/>
</body>
`
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<div class="container-fluid">
Tech Blog
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
just change script to this
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
The examples on the Bootstrap 5 site only show non-LI nav items aligned to the right.
I have 4 menu items, 3 should be left aligned while the last should be pushed to the right.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
You could achieve this with the classes .me-auto on the left div or .ms-auto on the right div. This adds a margin between the two different navigation elements. Here a short demo, but you can see some other examples with a searchbar in the navbar-documentation.
Changed navbar-expand-lg to just navbar-expand so the example is easily visible without needing to go fullpage.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap navbar demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<!-- div class="navbar-nav"> -->
<!-- use me-auto here... -->
<div class="navbar-nav me-auto">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
<!-- ...or use ms-auto here -->
<!-- <div class="navbar-nav ms-auto"> -->
<div class="navbar-nav">
<a class="nav-link" href="#">Settings</a>
<a class="nav-link" href="#">Account</a>
<a class="nav-link" href="#"><span class="btn btn-outline-danger btn-sm">Logout</span></a>
</div>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
Note that these changes would not have any visual effect on the mobile version of the navigation. Also, if you are using e.g. divs or lists (ul/ol) for the navigation will not make any visual difference with bootstrap. However, it could make an impact in SEO and accessability.
I am trying to keep selected tab active on page refresh.. using bootstrap 5. I checked all the same questions for different versions, None of them worked. What should I do? Give me a clue
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="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</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</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>
I changed all the elements of my dashboard, for an example of the boostrap site itself, but after I made the change, all my partial views opening below the components of the admin screen
ScreenShot:
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-lg-5">
<li class="nav-item">
</li>
</ul>
#Html.Partial("_LoginPartial")
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#Url.Action("Index", "Barcos")">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Orders
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
#RenderBody()
</main>
My Partial Example:
<div style="margin-top:40px" class="jumbotron">
<h1>EXAMPLE</h1>
</div>
Resolved, the renderbody was in the wrong place.
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#Url.Action("Index", "Barcos")">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Orders
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
#RenderBody()
</main>
</div>
</div>
Using Bootstrap 4.1 and using an example from the docs, just switching "href" for "data-target".
https://getbootstrap.com/docs/4.1/components/navs/#javascript-behavior
http://jsfiddle.net/aq9Laaew/70683/
Example
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" data-target="#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" data-target="#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" data-target="#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">AAA</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">BBB</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">CCC</div>
</div>
Tabs are working fine on all desktop browsers I have tried, including Safari, and all Android browsers I have tried as well.
However, on all iOS devices the tabs are inactive, that is, they are not switching, neither the tab links, nor the displayed content.
Anyone have an idea what I am doing wrong, or if this is a bug in Bootstrap 4.1?
According to HTML docs, a <a> is "interactive content" "if it has a href attribute". iOS implementation of this definition is literal and click events are ignored on anchors without href.
The proper way to enable clicks on iOS native devices is to use the id of the .tab-pane as href.
You could do it manually or you could use this lil' snippet which simply copies them from data-target, only on native iOS devices and only if the anchor does not already have a href attribute.
I haven't tested it on an iOS device but it should work:
$(window).on('load', () => {
let iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
if (iOS)
$('[role="tablist"] .nav-link').each((i,e) => {
if (!$(e).attr('href'))
$(e).attr('href', $(e).data('target'));
})
})
Note all Bootstrap 4 tabs examples use href attributes. Before asking about or reporting a potential Bootstrap "bug", make sure your markup is valid and not missing anything compared to the Bootstrap docs examples.
Here's a test using your markup:
$(window).on('load', () => {
let iOSdevice = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
if (iOSdevice)
$('[role="tablist"] .nav-link').each((i,e) => {
if (!$(e).attr('href'))
$(e).attr('href', $(e).data('target'))
})
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></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" data-target="#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" data-target="#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" data-target="#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">AAA</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">BBB</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">CCC</div>
</div>
For iOS detection I used this SO answer.