The code below is displaying correctly in one line in both FF and IE but Chrome for some reason is displaying it in two lines as if both span and button elements had "display:block;". While I see that span has indeed computed display as block (because of the "float: left" as I could read elsewhere), but button has computed display as "inline-block" so it would seem that it should be rendered next to span and not below it.
It seems to behave like this with any version of Bootstrap >= 3.
Can anybody tell me why does Chrome behaves like?
(And I'm not asking how to place those element next to each other - I already found out that it works correctly when using ul and li elements)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<link href="bootstrap-3.1.1/dist/css/bootstrap.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="bootstrap-3.1.1/dist/js/bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="nav navbar-nav">
<span class="navbar-text">User Name</span>
<button type="button" class="btn btn-default navbar-btn">Log out</button>
</div>
</div>
</nav>
</body>
</html>
When I look at the documentation: http://getbootstrap.com/components/#navbar I see that the class="navbar navbar-nav" goes into a ul, so I tried it this way and it is working:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
<li><span class="navbar-text">User Name</span></li>
<li><button type="button" class="btn btn-default navbar-btn">Log out</button></li>
</ul>
</div>
</nav>
</body>
</html>
Related
I am new to Thymeleaf and I'm simply trying to include a navigation bar in my pages.
I tried to use the code sample from the Thymeleaf documentation, some code samples from SO and from other websites but everytime the navigation bar doesn't display. However, I can see a menu, but this is not what I want.
header.html :
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>navbar</title>
</head>
<body>
<nav th:fragment="navbar" class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" th:href="#{/}">Homepage</a>
</div>
<ul class="nav navbar-nav">
<li><a class="nav-link" th:href="#{/itinerary}">Itinerary</a></li>
</ul>
</div>
</nav>
</body>
</html>
index.html :
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Homepage</title>
</head>
<body>
<div th:replace="fragments/header"> </div>
</body>
</html>
file structure :
templates
fragments
header.html
index.html
I was expecting to see a navigation bar, but this is the result :
result
Hi I am trying to develop navigation bar in CSS. I am very new to CSS but I tried some way in my react/type script application. Below is my expectation.
In the above image, left side project name and right side company logo. In between I need dropdown which has two options. I tried as below.
public render() {
return (
<div id="header">
<div style={{ overflow: "hidden", backgroundColor: "#f1f1f1", padding:"20px 10px" }}>
</div>
</div >
);
}
Which simply display small image with grey color. I am really trying hard to get this done. Can someone help me how can I write CSS and HTML for this. Thanks
If you need CSS + HTML implementation you can have a look at bootstrap Navbar for this. Bootstrap Navbar
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project Name</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Your Logo</li>
</ul>
</div>
</nav>
</body>
</html>
i have manually downloaded and added the bootstrap library into my code and trying to click my bootstrap navbar-toggler button it is not working, but when i try to add the CDN Bootstrap Librabry it is working fine please somebody help me ho do i solve this issue for manual downloaded bootstrap library
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Bootstrap Navbar</title>
<link rel="stylesheet" href="font_awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/#popperjs/core/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<img src="img/logo/logo.png" width="150px" height="auto" style="border: 1px solid lightgrey; border-radius: 3px"></img>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navber-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu 1</a>
</li>
</ul>
</div>
</nav>
<script></script>
</body>
</html>
Try to add the jquery, proper & bootstrap js file at the end of the "body"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Bootstrap Navbar</title>
<link rel="stylesheet" href="font_awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<img src="img/logo/logo.png" width="150px" height="auto" style="border: 1px solid lightgrey; border-radius: 3px"></img>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navber-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu 1</a>
</li>
</ul>
</div>
</nav>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/#popperjs/core/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script></script>
</body>
</html>
download files form here:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
put anywhere in your project (generally where js's and css's are kept)
provide a path to them in html via script tag :
<script src='<absolutepath>/<file_name>'> </script>
If you are using Bootstrap 5 use this: data-bs-toggle data-bs-target and insert into the button HTML tag like so:
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
I have been working on a site using the Download ready-to-use compiled code for Bootstrap v4.1.3 provided on the bootstrap page, and after reading how to work on the nav and the buttons I have stumbled into a problem.
below of my meta tags I have the css links
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="addons/css/bootstrap.min.css">
<link rel="stylesheet" href="addons/css/core-style.css">
<link rel="stylesheet" href="addons/css/menustyle.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-info fixed-top">
<a class="navbar-brand" href="#">
<img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top">
Bootstrap</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Facultad</a>
<a class="nav-item nav-link" href="#">Alumnos</a>
<a class="nav-item nav-link active" href="#">Consultas<span class="sr-only">(current)</span></a>
</div>
<div class="mx-auto"><b><h4>Consulta General [Notas]</h4></b></div>
</div>
</nav>
</header>
<section>...<section>
<section>...<section>
<button type="button" class="btn btn-secondary" style="width:auto" onClick="window.location.href='../Consultas.html'">Menu Consultas</button>
<section>...<section>
<footer>...</footer>
<!-- Opptional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The only fix I have for the button that I have in the body bellow all the other code but on the nav the code button tag does the same for the code of a tag
From the navbar the only one that has given me a problem is Placeholder that is between the atags same with the code below and that is when I hover over the button it gets smaller and that changes the height of the navbar when I hover it, link works fine and all is just that the hover, also the same happens when I use the code for the button on the Navbar provided by bootstrap
<a class="btn btn-secondary" href="Menu.php" role="button">Menu Principal</a>
the button on my code works but the a with role=button on another page does the same as the nav.
Don't know if I fully explained my issue or is easy to understand, also the code I been using is on the documentation of the Bootstrap site, also for the navbar if I don't put fixed-top on the class it leaves a white space at the top of the page I put the following code on menustyle.css but it didn't fix it, is there another way to remove the white space without the need to use fixed-top in the nav class?
header{
margin:0px;
}
body{
margin:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">nav-bar</a>
</div>
<ul class="nav navbar-nav">
<li class="active" title="home">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
</body>
</html>
Hey, this is the working snippet for nav bar . Please show us the issue which you're facing
My Nav bar is not displaying properly.the menus are stacking over another.Could anyone please help me to rule out the issue.i'm attaching the codes i used and also the current display of navbar in browser
<!DOCTYPE html>
<html lang="en">
<head>
<title>New Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap-4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="bootstrap-4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">New WebSite</a>
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Education</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>