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>
Related
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>
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 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 getting started with learning Ruby On Rails and I already learned I had to change my application.html.erb layout name to default.html.erb. Now I am trying to add a navbar to the layout, but it does not seem to be activating. The navbar will show up in individual pages, but the default layout stays the same. This is what I currently have in the code so far:
<!DOCTYPE html>
<html>
<head>
<title>HU</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<%= yield %>
</div>
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Any feedback on what I could be missing in the code or am I possibly missing an installation in the ruby-on-rails server I developed?
I'm using Bootstrap 4 to build my personal website. I'm CDN Bootstrap and FontAwesome. All of the icons are showing in the page but are not clickable. The code in my <head> is as follow...
<head>
<meta charset="UTF-8">
<!--Bootstrap CSS-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="
{{site.baseurl}}/css/main.css">
<title>Gilberto Diaz</title>
</head>
The structure of the navbar is as follow...
<!--Navbar Image & Social Icons-->
<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
<a class="navbar-brand" href="{{site.baseurl}}"><img class="img-fluid" src="{{site.baseurl}}/images/profile_img_bw.png"
alt="Gilberto Diaz Profile Picture"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="brand-text" href="{{site.baseurl}}">Gilberto Diaz <span class="sr-only">(current)</span></a>
</li>
</ul>
<a class="nav-link" href="mailto:{{site.author.email}}?subject=feedback" title="Email me">
<i class="fa fa-envelope"></i>
</a>
<a class="nav-link" href="https://twitter.com/{{ site.twitter_username }}" title="Twitter">
<i class="fa fa-twitter-square"></i>
</a>
<a class="nav-link" href="https://www.linkedin.com/in/{{ site.linkedin_username }}" title="LinkedIn"><i class="fa fa-linkedin-square"></i></a>
</div>
</nav>
<!--End of Navbar Image & Social Icons-->
_config.yml is as follow...
twitter_username: diazgilberto
github_username: diazgilberto
google_plus_username: +GilbertDiazCasanas
linkedin_username: diazgilberto
Two things:
When I hover cursor should change automatically with anchor tags in bootstrap and is not doing that.
Nothing happens when you click in the social icon