I'm learning Flask through a youtube tutorial, and I can't get the bootstrap navbar to work properly. I picked up the code from the bootstrap examples section. I've tried what other answers suggested around here on similar questions but nothing seems to solve the problem. Code snippets and screenshot posted below. The CSS link I'm using works fine too. I'm a beginner so any help would be really appreciated. Thank you.
layout.html:
<!DOCTYPE html>
<html>
<head>
<title>MyFlaskApp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
{% include 'includes/_navbar.html' %}
{% block body %}{% endblock %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
_navbar.html:
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">MyFlaskApp</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Articles</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
You're importing Bootstrap 4, but attempting to use the Bootstrap 3 syntax.
The easiest way to resolve this is to simply import Boostrap 3 instead, which can be done via the URL https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css. Note that while not necessary for the styling, you'll probably also want to switch the JavaScript to the same version via https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js.
This simple change corrects your navbar, as can be seen in the following:
<!DOCTYPE html>
<html>
<head>
<title>MyFlaskApp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<!-- _navbar.html -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">MyFlaskApp</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Articles</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Hope this helps! :)
Related
I'm using Visual studio and ASP.net to build a web page.
My code:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
</head>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img alt="" src="~/resources/favicon.ico"></a><a class="navbar-brand" href="/">ASTRO</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Pictures</li>
<li>Tonight's Sky</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Bootstrap link I'm using:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
I've tried the latest bootstrap version 5.1.3 with no luck.
As I said in the header, Works fine in the mobile Firefox but all I get mobile Chrome browser is the Navbar and the "ASTRO" link which works the other links in the list don't show. And when I click on the 3 bars button nothing happens.
Does Chrome need some special settings?
Thanks
Nor
You needed to include jQuery and Bootstrap .js files since the button uses JavaScript:
Updated code:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img alt="" src="~/resources/favicon.ico"></a><a class="navbar-brand" href="/">ASTRO</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Pictures</li>
<li>Tonight's Sky</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
I'm looking for a collapsible navbar. I attempted it with the code below without any success.
The following is my code:
<!DOCTYPE html>
<html>
<head>
<title> Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
</head>
<body>
<!-- nav bar -->
<nav style="background-color:#ffaa00" class="navbar navbar-light navbar-static-top">
<div class="container">
<div class="navbar-header">
Portfolio Site
<button type="button" class="navbar-toggle" data- toggle="collapse" data-target=".navigation"><span class="glyphicon glyphicon- menu-hamburger"></span></button>
</div>
<div class="collapse navbar-collapse navigation">
<ul class="nav navbar-nav navbar-right" >
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
You have missed ,
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
within your button tag. Also make sure to add correct bootstrap and Jquery CDNs
<html>
<head>
<title> Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- nav bar -->
<nav style="background-color:#ffaa00" class="navbar navbar-light navbar-static-top">
<div class="container">
<div class="navbar-header">
Portfolio Site
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navigation"><span class="glyphicon glyphicon-menu-hamburger"></span></button>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navigation">
<ul class="nav navbar-nav navbar-right" >
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
<nav id="navbar-custom" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="GIỚI THIỆU.HTML"><img src="logo.png" alt="logo-Image"></a>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav mynavbar">
<li><a id="menu_link" href="GIỚI THIỆU.html">GIỚI THIỆU</a></li>
<li><a id="menu_link" href="#EVAALUTION">ĐÁNH GIÁ</a></li>
<li><a id="menu_link" href="ĐĂNG KÝ.HTML">ĐĂNG KÝ</a></li>
</ul>
</div><!--/.nav-collapse -->
I am stuck on making a responsive pronunciation-teaching website with logo right on in the top-middle of the page and put the menu right beneath the logo. How I can do that with bootstrap?
all i want is make my web as the photo
It's best that your learn CSS in general before hopping into Twitter Bootstrap.
Also, please post a jsfiddle or jsbin of your code.
You could center it simply with:
.logo {
margin: 0 auto;
}
Otherwise you can use the Bootstrap grid system to pseudo-center the logo.
Just a class logo and add following css to that class
.logo{margin: 0 auto;}
To learn CSS log on to site
Wrap your logo within col-xs-12 so it will take the full width of your navbar container - you can pull it left/right/center it within later on:
<div class='col-xs-12'><a class="navbar-brand" href="GIỚI THIỆU.HTML"><img src="logo.png" alt="logo-Image"></a></div>
I'm not really sure if this is what you want to achieve but there you go.
i have used class extra small with logo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<nav id="navbar-custom" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="col-xs-12"> <a class="navbar-brand " href="GIỚI THIỆU.HTML"><img src="logo.png" alt="logo-Image"></a></div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav mynavbar">
<li><a id="menu_link" href="GIỚI THIỆU.html">GIỚI THIỆU</a></li>
<li><a id="menu_link" href="#EVAALUTION">ĐÁNH GIÁ</a></li>
<li><a id="menu_link" href="ĐĂNG KÝ.HTML">ĐĂNG KÝ</a></li>
</ul>
</div><!--/.nav-collapse -->
</body>
</html>
Can someone tell me why my links aren't lining up horizontally? I'm using bootstrap 3. I've referenced the bootstrap website and my code appears identical to their examples. I'm not using any custom CSS other than the bootstrap library so I am unsure how to remedy, any assistance gladly appreciated!
<!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>Test</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainnav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="mainnav">
<ul class="nav navbar-nav">
<li><a href="#">Home</li>
<li><a href="#">About</li>
<li><a href="#">Contact</li>
</ul>
</div>
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
</body>
</html>
You are missing closing anchor tags in your unordered list.
<li>Home</li>
<li>About</li>
<li>Contact</li>
Nav:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="mainnav">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
JSFiddle
I just started this project but I just can't get the navbar right. Read every same question on stack but I can't figure it out. Tried the jquery everywhere and screened my code now about a 100 times.
<title>Dit is Bas</title>
<meta name "viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link type="css/bootstrap.min" rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="javascript/bootstrap.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="collapse 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="index.html">Bas</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Photo's</li>
<li>About Bas</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
Hopefully somebody will see the problem.
Thanks in advance!
The problem lies in data-target="collapse navbar-collapse" which should be id of div that has items of menu. For transitions to work in Bootstrap you need jquery.js before bootstrap.js.
You should have something like this to have working navbar.
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#important-id-for-collapsing" aria-expanded="false">
<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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="important-id-for-collapsing">
<ul class="nav navbar-nav">
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
</div>
</nav>
Here's a link to JSFiddle.