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>
Related
i'm new to bootstrap. have been trying to figure out where i got it wrong, when i click on the collapse button to expand the menu on mobile-screen size, its not displaying my nav-item
<!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>bootstrap-tutorials</title>
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="stylesheet" href="/assets/css/fontawesome.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light menu">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Testimonals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="/assets/js/bootstrap.bundle.js"></script>
</body>
</html>
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 currently having trouble creating 2 rows and getting align logo(heading) to the left, 'Home' and 'User' menu links to the top right corner. The second row should display 'Link1', 'Link2', 'Link3' menu in the center. The following code doesn't seem to align properly.
I have tried to use 'navbar-nav mr-auto' for logo but it didn't work. Also tried 'Home', 'About' links 'ml-auto'. It doesn't work.
*******************************************************************************************
Home About User
Logo Heading1
Link1 Link2 Link3 Link4
*******************************************************************************************
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand mr-auto" href="">
<img style="width: 72px; height: 71px;" src="logo-1.png">Heading
</a>
<div class="d-flex flex-column flex-wrap" id="navbarCollapse">
<ul class="navbar-nav mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
<div id="divSubMenu" runat="server" >
<ul class="navbar-nav mx-auto mt-auto">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
Try this code. hope will help You.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto text-md-center mt-5">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
<div class="nav-item flex-row justify-content-md-center justify-content-start flex-nowrap">
<ul class="navbar-nav mb-5">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
Hope below code will help you
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Logo Heading1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
<div class="nav-item">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
If u want out put like you have provided text above logo above middle on below
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light align-items-start">
<a class="navbar-brand" href="#">Logo Heading1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto mt-5">
<li class="nav-item active" id="liDashboard" runat="server">
<a class="nav-link" href="Dashboard.aspx">Link1</a>
</li>
<li class="nav-item" id="liaint" runat="server">
<a class="nav-link" href="ation.aspx">Link2</a>
</li>
<li class="nav-item" id="liign" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item" id="lise" runat="server">
<a class="nav-link" href="Search.aspx">Link4</a>
</li>
</ul>
<div class="nav-item">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="ace.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="User.aspx" >User</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
You can try stacking multiple navbars in bootstrap 4 as shown below. Please see if this answer is acceptable for you requirements. Hope this helps!
EDIT: Updated my code to only have two rows as requested in the question. Good luck champ..
<!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 name="description" content="">
<meta name="author" content="">
<title>Stack Answer</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark py-0">
<div class="container">
<div class="collapse navbar-collapse" id="navbarResponsive1">
<ul class="navbar-nav ml-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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark pt-0">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item">
<a class="navbar-brand" href="#">
<img style="width: 72px; height: 71px;" src="http://placehold.it/72x71?text=Logo">
Stack Answer
</a>
</li>
</ul>
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link4</a>
</li>
</ul>
</div>
</nav>
<!-- Page Content -->
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
</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>
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>