I cannot get to work the navbar collapse in Bootstrap 3.
My menu collapse nicely when I change screensize, only it won't show the menu when I press the button.
This is my code:
<header class="container">
<div id="menu" class="navbar navbar-default">
<div class="navbar-header">
<button class="btn btn-success navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<div id="logo">
<a href='..'><h3>Logo</h3></a>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="nav active">Home
</li>
<li class="nav">About
</li>
<li class="nav">Contact
</li>
</ul>
</div>
</div>
</header>
Your HTML works fine, so make sure you are referencing the proper scripts and and styles in your markup
Make sure you have the following in your markup:
bootstrap.min.css
font-awesome.min.css
jquery.js
bootstrap.min.js
Fiddle Works Fine
Copy and paste this HTML:
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-2.0.2.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
The issue is not in the HTML your code works perfect in this Fiddle
Check this fiddle
make sure you include the responsive css
http://getbootstrap.com/dist/css/bootstrap.css
and the correct JS
http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js
I also suffered from the same problem, and could not find the solution anywhere. Actually bootstrap.min.js needs jquery to work. SO if you put script src=js/bootstrap.min.js before script src=js/jquery.js it will not work.
The Order of inclusion of jquery and bootstrap.min.js is important.
Related
<div id="DonorLinks">
<hr>
<ul id="donorLinkSection" class="nav nav-justified">
<li id="IntroVideo" class="navLinks">
<a id="DonorIntroVideoLink" href="/" onclick="return someFunction()">
<i class="fa fa-play-circle"></i>Watch introductory video
</a>
</li>
<li id="PgmDetails" class="navLinks"><a id="PgmDetailsPageLink" href="DonorDetails"><i class="glyphicon glyphicon-list-alt" aria-hidden="true"></i>View program details</a></li>
<li id="TestimonialLink" class="navLinks"><a id="TestimonialPageLink" href="DonorTestimonials"><i class="fa fa-commenting"></i>See what nonprofits say</a></li>
</ul>
<hr>
</div>
Hi, the above HTML gives the following arrangement of URL in Desktop View and Mobile View
I have used nav-justified class to justify the links in both desktop view and mobile view. While the desktop view is just fine (Three links appearing horizontally), In mobile view the 2nd link is slightly misaligned (links have to appear vertically). Is there a cleaner way to align the links in mobile view?
answer updated
you can now individually give margin-right to your second link #PgmDetails
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
<style>
#PgmDetails { margin-right: 22px; } <!-- as per your need-->
</style>
</head>
<body>
<div id="DonorLinks">
<hr>
<ul id="donorLinkSection" class="nav nav-justified">
<li id="IntroVideo" class="navLinks">
<a id="DonorIntroVideoLink" href="/" onclick="return someFunction()">
<i class="fa fa-play-circle"></i>Watch introductory video
</a>
</li>
<li id="PgmDetails" class="navLinks"><a id="PgmDetailsPageLink" href="DonorDetails"><i class="glyphicon glyphicon-list-alt" aria-hidden="true"></i>View program details</a></li>
<li id="TestimonialLink" class="navLinks"><a id="TestimonialPageLink" href="DonorTestimonials"><i class="fa fa-comments"></i>See what nonprofits say</a></li>
</ul>
<hr>
</div>
</body>
</html>
<div class="container">
<div class="row">
<div class="col-md-12">
some text
</div>
</div>
</div>
Try like that ?
I think glyphicon used extra padding or margin in your code.
just update
<i class="glyphicon glyphicon-list-alt ml-0 pl-0" aria-hidden="true"></i>
or you can inspect element so that you can see where is that extra padding
I think your using Bootstrap. We can use flex-column class Reference link
I have a weird css issue.
(probably missed something really basic).
I have a small project (one of 8 in my solution).
It is an MVC empty application, with a simple index.html file, which references bootstrap.css
It also has a popup. (which does not reference any css at all).
The popup shows the expected css styles, but it does not reference them at all. (Left to it's parent's css links).
But the index.html ..looks nothing like it should (using navbar navbar-inverse).
What have I missed? please.
I used nm to install the necessary, hence the folder structure.
(The js refs are being picked up).
Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Application</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" />
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="node_modules/oidc-client/dist/oidc-client.js"></script>
<style>
.main-container {
padding-top: 70px;
}
</style>
</head>
<body style="vertical-align:top;">
<nav id="main_nav" class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid navbar-inverse" style="color:gainsboro;height:100%">
<div class="navbar-header">
<a class="navbar-brand" href="#">JS Application</a>
</div>
</div>
<div class="container main-container">
<div class="row">
<div class="col-xs-12">
<ul class="list-inline list-unstyled requests">
<li>Home</li>
<li><button type="button" class="btn btn-default js-login">Login</button></li>
<li><button type="button" class="btn btn-default js-call-api">Call API</button></li>
<li><button type="button" class="btn btn-default js-logout">Logout</button></li>
</ul>
</div>
</div>
</div>
</nav>
This is an image of the project's solution explorer.
The solution for an Empty non MVC website in Visual Studio is to show All Files, find the Content folder, then include it in the project, add the css files e.g. bootstrap via NuGet, if not already there (VS usually for most templates adds it in automatically), but in a blank asp.net website, the Content Folder may not be included/visible.
Set your href to the css file and all's done and working.
This question already exists:
Finding to position logo on bootstrap very difficult
Closed 5 years ago.
I am trying to position my logo at the top left, inside the navbar.
My logo will not respond when I try to position it to the far-left of the navbar using 'margin-right'.
When I position the logo to the left, it is pushing the menu out to the right to the middle of the navbar.
Could anyone give me advice?
Thank you.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Arabella Hill</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href='#'><img src="img/arabella.png" class="img-responsive" img style="max-width:300px; margin-top:-80px; margin-right: 100px;"></a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li class="dropdown">
Themes<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Admin & Dashboard</li>
<li>Admin 1</li>
<li>Admin 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Have you tried using "margin-left" with a negative value?
... margin-top:-80px; margin-left:-20px; ...
You may need to alter the value to suit the image dimensions.
There may be some other styling on the .navbar or .navbar- header classes that's pushing it right.
Have a look on the the browser inspection tool to check these DIVs for extra styling.
Get rid of the margin-right on your logo. That is pushing your nav to the right.
I would advise putting your styles in a CSS file but if you're going to do inline try something like this if you want it against the left side of the screen
<a class="navbar-brand" href='#'><img src="img/arabella.png" class="img-responsive" style="max-height:50px; margin-top:-80px; margin-left: -30px;"></a>
I would also advise using the developer inspector on your browser to see how padding and margin are affecting the logo.
I coded a navigation bar with three links. The navigation bar should be responsive which means that if the window becomes small enough the links should disappear (as they do) and a new button with three horizontal lines should appear (which does not).
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="navbar-inner">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="btn btn-navbar" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span
class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/server">APL</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div
class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Impressum</li>
<li class="active">Documentation</li>
</ul>
</div>
</div>
</div>
</nav>
Why does the button in the following JSFiddle demo stay invisible (same markup)?
http://jsfiddle.net/BaR3q/22/
The menu button is there, but it's white so you can't see it.
Add navbar-inverse class to the navbar and it shows up:
http://jsfiddle.net/BaR3q/23/
UPDATE
Your original question only asked “Why does the button in the following JSFiddle demo stay invisible” and my above jsfiddle example solved that. But per your comment below, I looked at your jsfiddle again.
The reason the menu button wasn't toggling the menu was you didn't have a valid link to bootstrap.min.js nor did you preload jQuery. After adding both, you can see your demo works: http://jsfiddle.net/BaR3q/25/
This is a JsFiddle issue.
I already got this one, with a Bootstrap-3 navbar. Your code perfectly works, you can try it in a blank file. You can also copy paste the Bootstrap-3 navbar example to see the issue.
A working JSBin.
Bootstrap's JavaScript was incorrectly linked in the jsFiddle. It was added without an http:// and was linking to jsfiddle.net.
Also, Bootstrap's JavaScript requires jQuery, but the Fiddle did not include it.
I fixed the reference to Bootstrap's JS and added jQuery as a dependency. I also inverted the colors on the navbar so you could see it more easily with navbar-inverse. Everything works great:
http://jsfiddle.net/BaR3q/24/
I put your menu code into my boilerplate BS3 nav bar template and it works. Tested in Firefox 17, Chrome 29 and IE8 (I my environment I have to support IE8, so I included some info about that, too). Let me know if you have need anything else or have any questions.
UPDATE: JSFiddle Demo
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap Sample</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jQuery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--
SET UP THE FOLLOWING FOR YOUR ENVIRONMENT IF YOU WANT TO SUPPRT IE8.
See https://github.com/scottjehl/Respond for more. Note that the Respond.js script
will not function locally in IE8 due to browser security restrictions.
-->
<script src="js/respond.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="btn btn-navbar"
class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/server">APL</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Impressum</li>
<li>Documentation</li>
</ul>
</div>
</nav>
</body>
</html>
I'm new to bootstrap, i'm working with the last version. I want to do a simple site, to get to know bootstrap, but already have a problem, that I can't solve. The navbar and the icon appears to be ok, but when I click, nothing happend. I have put my complete code bellow.
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Getting started with Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<script src="js/bootstrap.js"></script>
</head>
<body>-->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Site name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<nav class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
</div>
</div>
I am somewhat new to using Bootstrap as well and I think I may have found some answer to your problem. It looks like you downloaded all the libraries but you may not have included all the jquery, JS, and Popper.js links in your head.
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
It happened to me too because I didn't link all the libraries. So check to see if there aren't any libraries you didn't refer to in your head.
PS: Sorry I don't use the downloaded version of the libraries so I can't tell you specifically which files and libraries to select.
Hope it helps still ;)