<body>
<div class="container mt-3">
<h2>Vertical Nav</h2>
<p>Use the .flex-column class to create a vertical nav:</p>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Link</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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</body>
How do you make the navbar in bootstrap this way with more options on the right of the sidebar as in the picture?
enter image description here
You can check out the Examples page from the Bootstrap site.
https://getbootstrap.com/docs/5.1/examples/
Check out the DEMO below:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container">
<div class="row p-5">
<div class="col">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">Link</li>
<li class="nav-item mb-2">Link</li>
<li class="nav-item mb-2">Link</li>
<li class="nav-item mb-2">Link</li>
</ul>
</div>
<div class="col">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">Link</li>
<li class="nav-item mb-2">Link</li>
</ul>
</div>
<div class="col">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">Link</li>
<li class="nav-item mb-2">Link</li>
</ul>
</div>
</div>
</div>
Related
Here is my code (only body)
<body>
<div class="container-fluid">
<div class="row">
<ul class="nav justify-content-center nav-tabs">
<li class="nav-item">
<a class="nav-link" href="/home.php">Home</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.php">Log Out</a>
</li>
</ul>
</div>
</div>
</body>
Display :
I can however , center ul when i place ul within a column. Is there a specific reason why my above code could not center ul
EDIT :
If i remove row from the code, I could use justify-content-center on ul.My question however still stands as I could not explain the behavior when row is present
<body>
<div class="container-fluid">
<ul class="nav justify-content-center nav-tabs">
<li class="nav-item">
<a class="nav-link" href="/home.php">Home</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.php">Log Out</a>
</li>
</ul>
</div>
</body>
Try this instead,
First Method
please add flex-basis:100%; to for align <ul> center.
ul{
flex-basis:100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
<div class="container-fluid">
<div class="row">
<ul class="nav nav-tabs justify-content-center">
<li class="nav-item">
<a class="nav-link" href="/home.php">Home</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.php">Log Out</a>
</li>
</ul>
</div>
</div>
</body>
Second Method
please add justify-content-center to row class to align <ul> center instead of adding to <ul> tag.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="/home.php">Home</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.php">Log Out</a>
</li>
</ul>
</div>
</div>
</body>
The ul itself is not centered, so using .justify-content-center will center its child li elements only inside the ul, while it itself remains on the left. Add .justify-content-center to the ul's parent element (the row div) and it should work.
try this,
<div class="row">
<ul class="nav justify-content-center nav-tabs" style="display: flex; justify-content: center;">
<li class="nav-item">
<a class="nav-link" href="/home.php">Home</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.php">Log Out</a>
</li>
</ul>
</div>
I'm working on a internal website for the company I work for and my manager wants me to have the Menu as a jsp include page instead of it being coded into the page like this(which works).
<head>
<title>SomeCompany Intranet</title>
<jsp:include page="/jsp/head.jsp"/>
</head>
<body style="min-height: 75rem; padding-top:110px;">
<jsp:include page="/jsp/header.jsp"/>
<div class="sidenav">
<div class="nav flex-column nav-pills" aria-orientation="vertical">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link disabled">Marketing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/AA.jsp">Agent Access</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="${pageContext.request.contextPath}/jsp/marketing/ItemsCatalog.jsp">Promotional Items Catalog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/OrderForm.jsp">Catalog Order Form</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/TravelForm.jsp">Travel Form</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/TuitionAssi.jsp">Tuition Assistance Form</a>
</li>
</ul>
</div>
</div>
<div class="mainHeader">
<h1>PROMOTIONAL ITEMS CATALOG</h1>
</div>
<div class="tab-content main1">
<iframe src="${pageContext.request.contextPath}/pdf/PromotionalCatalog 01-20.pdf" width="100%"
height="100%"></iframe>
</div>
He wants it to look more like this.
<head>
<title>SomeCompany Intranet</title>
<jsp:include page="/jsp/head.jsp"/>
</head>
<body style="min-height: 75rem; padding-top:110px;">
<jsp:include page="/jsp/header.jsp"/>
<div class="sidenav">
<jsp:include page="/jsp/marketing/TestMenu.jsp"
</div>
<div class="mainHeader">
<h1>PROMOTIONAL ITEMS CATALOG</h1>
</div>
<div class="tab-content main1">
<iframe src="${pageContext.request.contextPath}/pdf/PromotionalCatalog 01-20.pdf" width="100%" height="100%"></iframe>
</div>
</body>
This is the TestMenu.jsp
<div class="nav flex-column nav-pills" aria-orientation="vertical">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link disabled">Marketing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/AA.jsp">Agent Access</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="${pageContext.request.contextPath}/jsp/marketing/ItemsCatalog.jsp">Promotional Items Catalog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/OrderForm.jsp">Catalog Order Form</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/TravelForm.jsp">Travel Form</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/TuitionAssi.jsp">Tuition Assistance Form</a>
</li>
</ul>
</div>
My nav pills go active but they don't take me to the actual pages. But if I remove the active from the TestMenu the links work. It's such a small thing that I'm trying to accomplish which is highlighting the proper pills and I just need help figuring it out. Or at least point me in the right direction.
Even though I'm in the 2020 Corporate Calendar page it shows Project Team Guidelines highlighted.
how to create a hamburger menu for this code?
<div class="container-fluid h-100">
<div class="row h-100">
<div class="collapse d-md-flex h-100 box">
<ul class="nav flex-column flex-nowrap h-100">
<li class="nav-item h-25"><a class="nav-link h-100 " href="#">A </a></li>
<li class="nav-item h-25 "><a class="nav-link h-100 " href="#">B</a></li>
<li class="nav-item h-25"><a class="nav-link h-100 " href="#l">C</a></li>
<li class="nav-item h-25"><a class="nav-link h-100" href="#">D</a></li>
</ul>
</div>
</div>
</div>
can anyone help please?
Basically, you should follow the documentation. Your code should look like this.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">A</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">B</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">C</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">D</a>
</li>
</ul>
</nav>
I'm having trouble with Bootstrap 4 in IE10; I made a navbar with a phone number/linked-in link on the right using justify-content-end which works perfectly until I checked it in IE10, the website is required to work on IE10 specifically so it is a problem. The code is as follows:
<nav class="navbar navbar-expand-md navbar justify-content-center bigText blueBG">
<!-- Dropdown toggler for small devices -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="fas fa-bars text-white"></span>
</button>
<!-- Links -->
<div class="navbar-collapse collapse w-100 justify-content-center ml-5" id="navbar">
<a class="nav-item nav-link text-white link" href="home">Home</a>
<a class="nav-item nav-link text-white link" href="#">#</a>
<a class="nav-item nav-link text-white link" href="tool">Tool</a>
<a class="nav-item nav-link text-white link" href="contact">Contact</a>
<a class="nav-item nav-link text-white link" id="finalLink" href="documentatie">Documentatie</a>
</div>
<div class="navbar-collapse collapse justify-content-end">
<a href="tel:+0123456789">
<i class="fas fa-phone text-white"></i>
</a>
<a href="https://www.linkedin.com/">
<i class="fab fa-linkedin text-white ml-2"></i>
</a>
</div>
The problem is that the navbar just cuts off near the right end of the page, after that it's just the white background and a blue square.
Fixed it! I omitted the w-100 class and changed the justify-content-center to justify-content-end:
<nav class="navbar navbar-expand-md navbar bigText blueBG">
<!-- Dropdown toggler for small devices -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="fas fa-bars text-white"></span>
</button>
<!-- Links -->
<div class="navbar-collapse collapse justify-content-end ml-5" id="navbar">
<a class="nav-item nav-link text-white link" href="home">Home</a>
<a class="nav-item nav-link text-white link" href="#">#</a>
<a class="nav-item nav-link text-white link" href="tool">Tool</a>
<a class="nav-item nav-link text-white link" href="contact">Contact</a>
<a class="nav-item nav-link text-white link" id="finalLink" href="documentatie">Documentatie</a>
</div>
<div class="navbar-collapse collapse justify-content-end">
<a href="tel:+0123456789">
<i class="fas fa-phone text-white"></i>
</a>
<a href="https://www.linkedin.com">
<i class="fab fa-linkedin text-white ml-2"></i>
</a>
</div>
Bootstrap 4 only partially supports IE 10/11. Your problem here could be the "justify-content" classes which, according to this Can I Use... isn't supported properly. Try removing them and see if that works for your overflow problem. If not, please inform us of what changed.
I hope this will helpful for you,
/*!
* IE10 viewport hack for Surface/desktop Windows 8 bug
* Copyright 2014-2017 The Bootstrap Authors
* Copyright 2014-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
// See the Getting Started docs for more information:
// https://getbootstrap.com/getting-started/#support-ie10-width
(function () {
'use strict'
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'#-ms-viewport{width:auto!important}'
)
)
document.head.appendChild(msViewportStyle)
}
}())
body {
padding-top: 2rem;
}
.container {
padding-bottom: 1.5rem;
}
.bd-example {
padding: 1.5rem;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
border-width: .2rem;
margin: 1rem -15px;
border: solid #f7f7f9;
}
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Horizontal: Base Nav</h2>
<div class="bd-example">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" 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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Horizontal: Justify Content Center</h2>
<div class="bd-example">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" 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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Horizontal: Justify Content End</h2>
<div class="bd-example">
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" 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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Vertical: Flex Column</h2>
<div class="bd-example">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" 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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Base Nav: Tabs</h2>
<div class="bd-example">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" 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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Base Nav: Pills</h2>
<div class="bd-example">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" 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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Base Nav: Fill and justify</h2>
<div class="bd-example">
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" 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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Just remove "mr-auto" or "m-auto" from the div just above .
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent" >
<ul class="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="#">Link</a>
</li>
</ul>
</div>
</nav>
Here you can see what it looks like right now.
What it looks like now
How do I get the nav to appear on the right side of the screen while making it be on the same line as the copyright? I cannot seem to get anything to work that I have seen on here so far.
Here is my current code:
<div class="container-fluid footer">
<div class="spacer"></div>
<div class="container">
<h5 style="display: inline">Copyright © 2017 Custom Prop Shop</h5>
<ul class="nav flex-column flex-sm-row justify-content-end pull-right">
<li class="nav-item">
<a class="nav-link" href="request-estimate.html">Request an Estimate</a>
</li>
<li class="nav-item">
<a class="nav-link" href="our-work.html">Our Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="our-clients.html">Our Clients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="our-story.html">Our Story</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
<div class="spacer"></div>
</div>
CSS is only controlling color of the text/background and the font-size for this part.
I think the easiest way would be to make the container d-flex, and then use my-auto to vertically center the h5...
<div class="container d-flex justify-content-between">
<h5 class="my-auto">Copyright © 2017 Custom Prop Shop</h5>
<ul class="nav flex-column flex-sm-row">..</ul>
</div>
https://www.codeply.com/go/1WWhy3uP9C
You can use something like this
<div class="container-fluid footer">
<div class="spacer"></div>
<div class="container">
<div class="row">
<div class="col">
<h5 style="display: inline">Copyright © 2017 Custom Prop Shop</h5>
</div>
<div class="col">
<ul class="nav flex-column flex-sm-row justify-content-end pull-right">
<li class="nav-item">
<a class="nav-link" href="request-estimate.html">Request an Estimate</a>
</li>
<li class="nav-item">
<a class="nav-link" href="our-work.html">Our Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="our-clients.html">Our Clients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="our-story.html">Our Story</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</div>
<div class="spacer"></div>
</div>
You can reference Bootstrap Grid Options over here https://v4-alpha.getbootstrap.com/layout/grid/#grid-options
add float: left on the h5.
or float: right on the ul