I have this code in bootstrap 5 and it works as expected.
when clicking the tag the appropriate divs collapsed/hiden.
However i want to prevent the closing of other divs when you open the other one, how to prevent this in bootstrap 5?
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" role="button" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> 1<li>
<li class="nav-item"> 2<li>
<li class="nav-item"> 3<li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" role="button" href="#ui-enquiries" aria-expanded="false" aria-controls="ui-enquiries">
<i class="icon-grid-2 menu-icon"></i>
<span class="menu-title">Inquiries</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-enquiries">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> 1<li>
<li class="nav-item"> 2<li>
<li class="nav-item"> 3<li>
</ul>
</div>
</li>
Related
Using Bootstrap 5, with the navbar being a re-usable component used on many screens. The drop down menus work on all screens except for one, but for the life of me I can't see why that screen is different. JS console shows no errors, the navbar markup is identical to the one used in the other screens.
Any ideas on this are welcome.
Here's the navbar code (some data redacted for client's privacy):
<div class="bg-light">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">client's name</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link " href="/bkofc/">Main</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/bkofc/cases/" aria-current="page">Screen 1<span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownConfiguration" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
ניהול
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownConfiguration">
<a class="dropdown-item" href="/bkofc/branches/">config 1</a>
<a class="dropdown-item" href="/bkofc/caseTypes/">config 2</a>
<a class="dropdown-item" href="/bkofc/clients/">config 2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/bkofc/users/">config 3</a>
<a class="dropdown-item" href="/bkofc/inviteUser/">config 4</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarUserDropdown" role="button"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#admin
</a>
<div class="dropdown-menu" aria-labelledby="navbarUserDropdown">
<a class="dropdown-item" href="/bkofc/users/admin/edit">my account</a>
<div class="dropdown-divider"></div>
<form class="dropdown-item" action="/bkofc/logout" method="POST">
<input type="hidden" name="csrfToken" value="..." />
<button type="submit" class="btn btn-outline-danger"> logout</button>
</form>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
I ran the create using the jsbundler and cssbundler, it installed the appropiate files.
$ rails new app -j esbuild --css bootstrap
I created a navbar from the bootstrap doc on a partial and rendered on the application.html.erb
but when I run
$ ./bin/dev
on the navbar when I click on the dropdown or the hamburger button nothing happens
<!--./app/views/shared/_navbar.html.erb-->
<nav class="navbar navbar-expand-lg 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="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Also, I tryed importmap bootstrap but nothing seems to work.
You need to import bootstrap js files in your application.js, like that:
import "#hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"
document.addEventListener("turbo:load", () => {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
})
Reference: https://github.com/gorails-screencasts/bootstrap-css-bundling
Have you checked if the required bootstrap bundle js file is properly loaded?
Instead of using the asset pipeline why don't you add the required CSS and JS CDN links of bootstrap under the head tags in the application.html.erb file. I used this in my internship project and it works really well.
I have my navbar working great on fullscreen and the toggler is working on smaller screens. However, when you click on the toggler icon the navbar-items appear on the left side of the screen while the toggler-icon appears on the right. How do I fix this so that the navbar-items appear under the navbar icon and on the right side of the screen? I am using Bootstrap 5 for reference.
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="/">
<img class="navbar-logo" src="{% static 'site_base/images/image1.png' %}" alt="MagPie Logo">
</a>
<button
class="navbar-toggler navbar-dark"
type="button"
data-bs-toggle="collapse"
data-bs-target="#main-navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
<ul class="dropdown-menu">
<li class="dropdown-item">Product 1</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
<ul class="dropdown-menu">
<li class="dropdown-item">User Guides</li>
<li class="dropdown-item">Videos</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/company">Company</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact-us">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!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>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="/">
<img
class="navbar-logo"
src="{% static 'site_base/images/image1.png' %}"
alt="MagPie Logo"
/>
</a>
<button
class="navbar-toggler navbar-dark"
style="background-color: red"
type="button"
data-bs-toggle="collapse"
data-bs-target="#main-navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-end" id="main-navigation">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
<ul class="dropdown-menu">
<li class="dropdown-item">Product 1</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
<ul class="dropdown-menu">
<li class="dropdown-item">User Guides</li>
<li class="dropdown-item">Videos</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/company">Company</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact-us">Contact Us</a>
</li>
</ul>
</div>
</nav>
<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>
</body>
</html>
You can add text-end class on the navbar-collapse or ul.
Note: Try it on tablet to mobile size, I add background-color: red on the button, to make it visible.
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 Have markup that displays a Bootstrap-4 menu, with say 4 items.
Each menu Item, has a nested-submenu. (and i plan on going deeper)
The First item's submenu displays correctly. (Logistics, Logistics, Logistics)
The Following items does not display its respective submenu, but repeats the first item's submenu. (Logistics, Logistics, Logistics)
Suggestions for any would be appreciated....
I checked my markup, so lines are aligned and all nested correctly.
I found examples of bootstrap menus with only 1 submenu and that worked (obviously).
Having more than 1 submenu creates this problem.
<Done>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Home
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-toggle dropdown-item" href="#" id="navbarDropdownMenuLink11" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Applications
</a>
<ul class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink11">
<div class="dropdown-menu">
<a class="dropdown-item" href="">Logistics</a>
<a class="dropdown-item" href="">Logistics</a>
<a class="dropdown-item" href="">Logistics</a>
</div>
</ul>
<a class="dropdown-toggle dropdown-item" href="#" id="navbarDropdownMenuLink12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Technical Support
</a>
<ul class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink12">
<div class="dropdown-menu">
<a class="dropdown-item" href="/screens/utility.htm">Downloads</a>
<a class="dropdown-item" href="/screens/down_install.htm">Installation</a>
</div>
</ul>
<a class="dropdown-toggle dropdown-item" href="#" id="navbarDropdownMenuLink13" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
External Links
</a>
<ul class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink13">
<div class="dropdown-menu">
<a class="dropdown-toggle dropdown-item" href="#" id="navbarDropdownMenuLink14" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Logik Center
</a>
<ul class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink14">
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:window.open('http://logik.pwv.gov.za')">Log Request</a>
<a class="dropdown-item" href="javascript:window.open('http://10.131.15.145/vulindlela/requests_login.htm')">View Request</a>
</div>
</ul>
<a class="dropdown-item" href="javascript:window.open('http://xxxxxx')">Persal</a>
<a class="dropdown-item" href="javascript:window.open('http://xxxxxx')">Logis</a>
<a class="dropdown-item" href="javascript:window.open('http://xxxxxxxx/')">BAS</a>
<a class="dropdown-item" href="javascript:window.open('http://xxxxxxx')">Government</a>
<a class="dropdown-item" href="javascript:window.open('http://xxxxxxx')">National </a>
<a class="dropdown-item" href="javascript:window.open('http://www.xxxxxxxx/')">Bank</a>
</div>
</ul>
<a class="dropdown-item" href="/screens/vulhistory.htm">History</a>
<a class="dropdown-item" href="/screens/contactus.htm">Contacts</a>
<a class="dropdown-item" href="/screens/main.htm">Home</a>
</ul>
</li>
</Done>
I expect every item's submenu to be displayed, not just a repeat of the first items submenu.
Let me know if I need to provide more info.
It might be down to the way you're nesting the menu. Check below for a working example with 2 drop downs.
Here is the code:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action2</a>
<a class="dropdown-item" href="#">Another action2</a>
<a class="dropdown-item" href="#">Something else here2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link2</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>