Bootstrap 4 nav-pills active using include page - html

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.

Related

Vertical navs in bootstrap

<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>

<ul> in Bootstrap can't be centered when justify-content-center is applied to <ul> when <ul> is within a row

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>

Responsive BootStrap 4 Tab

I am using below code for BootStrap 4 tab.
<ul class="nav nav-tabs font-weight-bold">
<li class="nav-item">
<a class="nav-link active" href="#details" data-toggle="tab">Page Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#content" data-toggle="tab">Page Content</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="details">Page Details</div>
<div role="tabpanel" class="tab-pane fade" id="content">Page Content</div>
</div>
How can I make it responsive so that I can see this tabs even in 100px height and 100px width ?

use this
<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>
latest bootstrap 4.+ update of navs, works on every screensize
Will shrink to horizontal view if u go below 300px
link for latest bootstrap version
https://getbootstrap.com/

How do I give external or local html doc link to bootstrap nav-pills?

I need to link my another webpage to my pictures nav menu.
Ex: if I click my pictures menu , it opens google.com.
Framework: bootstrap 4
div class="row row2">
<div class="col-md-12">
<ul class="nav nav-pills justify-content-center nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My pictures</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My music</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My files</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My videos</a>
</li>
</ul>
</div>
</div>

This will work :)
<div class="row row2">
<div class="col-md-12">
<ul class="nav nav-pills justify-content-center nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="http://google.com">My pictures</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My music</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My files</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My videos</a>
</li>
</ul>
</div>
</div>

This is the correct code for my question. i solve this with your help. thankyou
Html
<div class="row row2">
<div class="col-md-12">
<ul class="nav nav-pills justify-content-center nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link" href="about_me.html">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="my_pictures.html">My pictures</a>
</li>
<li class="nav-item">
<a class="nav-link" href="my_music.html">My music</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="my_files.html">My files</a>
</li>
<li class="nav-item">
<a class="nav-link" href="my_videos.html">My videos</a>
</li>
</ul>
</div>
</div>
CSS
.active {
background-color: #39a0c9 !important;
color: #fff !important;
}

How do I add plain text to a Bootstrap 4 navbar?

This is probably very simple, but the answer seems to be eluding me. I have tried several combinations using navbar-text, but most of them end up putting the text either above or below another navbar item. I would like the text to be located just to the left of the "Sign In" link.
Here is what I have now:
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<a class="navbar-brand" href="#">Sample App</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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<div class="nav navbar-nav pull-md-right">
<div class="nav nav-item">
<p class="navbar-text">Signed in as User#1234</p>
</div>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
</div>
</nav>
That ends up looking like this:
Many thanks in advance.

I think it is because of the div block here:
<div class="nav nav-item">
<p class="navbar-text">Signed in as User#1234</p>
</div>
A div is always displayed as a block element and thats the reason why it will start a new line below the div block. If you put the item as a part of the list tag then it should work. For example:
<div class="nav navbar-nav pull-md-right">
<ul class="nav navbar-nav">
<li class="nav-item">
<p class="navbar-text">Signed in as User#1234</p>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
</div>