I have created basic static website project with harp.js. Project does compiles successfully with no errors and I have added required files and dependencies for bootstrap 4.Problem is my template layout does not render properly.
Here is my layout html.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<title></title>
</head>
<body>
<%- partial("partial/_header") %>
<%- yield %>
<%- partial("partial/_footer") %>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
_header partial view html
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Learning Bootstrap 4</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-primary" type="submit">Search</button>
</form>
</nav>
I am getting same output in every browser.
JsFiddle for problem
Can any point out what am I doing wrong ?
You missed navbar-expand on nav element. Check the updated fiddle:
https://jsfiddle.net/cjhnsouf/2/
<nav class="navbar navbar-expand navbar-light bg-faded">
<a class="navbar-brand" href="#">Learning Bootstrap 4</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-primary" type="submit">Search</button>
</form>
</nav>
Related
I am trying to create a header using bootstrap 5. Within the header I have a navbar with links that I would like to float to the right. After looking on the bootstrap website I noticed that they added a justifty-content-end class to their menu list items. When I do this the items stay to the left. I have even tried adding float: right to the nav but this doesn't work either.
Here is my html
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
<ul class="nav justify-content-end" id="myNavbar">
<li class="nav-item">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
My css
ul {
float: right !important:
}
Can someone please explain how to fix this?
Check this solution, I have tried in my machine, this code working properly.
<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
</head>
<body>
<nav class="navbar navbar-dark bg-dark d-flex justify-content-end">
<!-- Navbar content -->
<ul class="nav" id="myNavbar">
<li class="nav-item">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
This works for me.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
<div class="container-fluid d-flex justify-content-end">
<ul class="nav" id="myNavbar">
<li class="nav-item">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Because the width of the navbar is not 100% of the page. Even if you set the float of the content of the navbar, it changes only in the navbar.
You can try to set the float of the navbar to the right.
Or set the width of your navbar to 100% and add float:right to the content as below.
<nav class="navbar navbar-dark" style="background-color:green;width:100%;height:100px;">
<!-- Navbar content -->
<ul class="nav justify-content-end" style="float:right;" id="myNavbar">
<li class="nav-item">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
This is for my mobile sized site. When I click the hamburger menu, the Navbar does not appear. My data-target matches the nav id so I'm not sure why it isn't working.
<section id="nav">
<nav class="navbar navbar-light navbar-expand-md py-2">
<a href="index.html">
<img src="./img/logo.png" class="img-fluid mw-121 height: auto" alt="Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLinks"><span
class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarLinks">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flavors.html">Flavors</a>
</li>
<li class="nav-item">
<a class="nav-link" href="details.html">What's Included</a>
</li>
<li class="nav-item">
<a class="nav-link" href="reserve.html">Reserve Today</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
</ul>
</div>
</nav>
</section>
I've used your code to replicate the problem but it's working fine. Check my code below you might be missing one of the dependencies.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<section id="nav">
<nav class="navbar navbar-light navbar-expand-md py-2">
<a href="index.html">
<p>Test Image here</p>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLinks"><span
class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarLinks">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flavors.html">Flavors</a>
</li>
<li class="nav-item">
<a class="nav-link" href="details.html">What's Included</a>
</li>
<li class="nav-item">
<a class="nav-link" href="reserve.html">Reserve Today</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
</ul>
</div>
</nav>
</section>
</body>
</html>
I am having trouble with the navbar collapse button.
The button for my navbar collapse will not open when the navbar button is clicked. I am assuming something is wrong with the data-toggle not toggling the collapse.
I am also not sure if the PHP code in the ul tags is messing with it.
Thank you for your help.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Montserrat:300" rel="stylesheet">
<script src="script.js"></script>
<title>MyCar</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.php">MyCar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link active" href="#">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="cars.php">Search Cars </a>
</li>
<li class="nav-item ">
<a class="nav-link" href="sell.php">Sell Cars </a>
</li>
<li class="nav-item ">
<a class="nav-link" href="financing.php">Financing </a>
</li>
</ul>
<ul class="navbar-nav mt-2 mt-lg-0">
<?php
if(isset($_SESSION['username'])){
echo '<li class="nav-item">
<a class="nav-link" href="profile.php">Welcome, '.$_SESSION['username'].'<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="?logout=true">Log Out</a>
</li>'
;
}
else {
echo '<li class="nav-item">
<a class="nav-link" href="signup.php">Sign Up <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.php">Log In</a>
</li>';
}
?>
<!--<li class="nav-item">
<a class="nav-link" href='?logout=true'>>Log Out</a>
</li> -->
</ul>
</div>
</nav>
Your link to Bootstrap.min.js is incorrect
change <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js">
into <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
working snippet below:
<!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/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Montserrat:300" rel="stylesheet">
<script src="script.js"></script>
<title>MyCar</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.php">MyCar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link active" href="#">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="cars.php">Search Cars </a>
</li>
<li class="nav-item ">
<a class="nav-link" href="sell.php">Sell Cars </a>
</li>
<li class="nav-item ">
<a class="nav-link" href="financing.php">Financing </a>
</li>
</ul>
<ul class="navbar-nav mt-2 mt-lg-0">
<?php
if(isset($_SESSION['username'])){
echo '<li class="nav-item">
<a class="nav-link" href="profile.php">Welcome, '.$_SESSION['username'].'<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="?logout=true">Log Out</a>
</li>'
;
}
else {
echo '<li class="nav-item">
<a class="nav-link" href="signup.php">Sign Up <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.php">Log In</a>
</li>';
}
?>
<!--<li class="nav-item">
<a class="nav-link" href='?logout=true'>>Log Out</a>
</li> -->
</ul>
</div>
</nav>
</body>
</html>
Bootstrap toggler not working. The icon is visible but after reducing browser size its not dropping links. I read other solutions also but mostly says load javascript before bootstrap, I tried loading js at first before bootstrap also but still it's not working. Below is the code I am using
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="Bootstrap/js/bootstrap.min.js"type="text/javascript"></script>
<link href="Bootstrap/css/bootstrap.min.css" rel ="stylesheet">
<script src ="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html;">
<title>HTML Test</title>
</head>
<body >
<!-- Container -->
<div class=”container”>
<!-- Navigation -->
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navigation Bar</a>
<button class ="navbar-toggler" type ="button" data-toggler="collapse" data-target="#navbarSupportContent" aria-expanded="flase" aria-lable ="Toggle navigation">
<span class = "navbar-toggler-icon" ></span>
</button>
<!-- links -->
<div class="collapse navbar-collapse" id="navbarSupportContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<!-- Drop down -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href ="#" data-toggle ="dropdown">More</a>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<a class="dropdown-item" href="#">Link 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Logout</a>
</li>
</ul>
</div>
<!-- Search Button and text column -->
<form class="form-inline my-2 my-lg-0" >
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-lable="Search">
<button class="btn btn-outline-sucess my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
<!-- pagination -->
<nav aria-lable="pageNavigation" >
<ul class="pagination justify-content-end">
<li class="pagination-item"><a Class="page-link" href="#">Previous</a></li>
<li class="pagination-item"><a Class="page-link" href="#">1</a></li>
<li class="pagination-item"><a Class="page-link" href="#">2</a></li>
<li class="pagination-item"><a Class="page-link" href="#">3</a></li>
<li class="pagination-item"><a Class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
</body>
</html>
There's a typo in the toggler button. It should be data-toggle="collapse" not data-toggler="collapse".
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportContent" aria-expanded="flase" aria-lable="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
How to control collapsible content in Bootstrap 4 ?
For example,this navbar as follow:
I want to control the status of this demo.
Specifically,
In status 2,I want the search inform not to be newline,still in one row.
In status 3，I want the search inform and navbar-brand not to be disappearing, the ul menu disappears only.
How to do it?
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/tether/1.3.2/css/tether.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#">Responsive navbar</a>
<ul class="nav navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.3.2/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</body>
</html>
The docs explain how this works. Take any content out of the collapse that you don't want in the responsive toggleable menu. You may need to tweak the CSS to decrease the width of the form.
http://www.codeply.com/go/eaTFM5w3S6 (Alpha 2)
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
☰
</button>
<a class="navbar-brand" href="#">Responsive navbar</a>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit">Search</button>
</form>
<div class="collapse pull-xs-left navbar-toggleable-sm" id="exCollapsingNavbar2">
<ul class="nav navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>