Hello how can make my nav-tabs full width, I tried using width:100%; to no avail.
here's the html code that i used.
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#learn" role="tab">Learn More</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#faq" role="tab">Frequently Asked Questions</a>
</li>
</ul>
There are build-in css classes to achieve this. From official docs:
To proportionately fill all available space with
your .nav-items, use .nav-fill. Notice that all horizontal space is
occupied, but not every nav item has the same width.
<ul class="nav nav-tabs nav-fill" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#learn" role="tab">Learn More</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#faq" role="tab">Frequently Asked Questions</a>
</li>
</ul>
For equal-width elements, use .nav-justified. All horizontal space
will be occupied by nav links, but unlike the .nav-fill above, every
nav item will be the same width.
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#learn" role="tab">Learn More</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#faq" role="tab">Frequently Asked Questions</a>
</li>
</ul>
As per I understood you want to width:100% to <ul class="nav nav-tabs"> right?
But by default <ul class="nav nav-tabs"> is in width: 100% you do not need to give css to <ul> but if you want to width: 100% to <li class="nav-item"> then give css to it like this:
.nav-item {
width:100%;
}
or else instead of text-align: center give <ul class="nav justify-content-center"> to your html.
it might be helpful. you do not need to give css to ul.
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tabs</h3>
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
<br>
<p><strong>Note:</strong> This example shows how to create a basic navigation tab. It is not toggleable/dynamic yet (you can't click on the links to display different content)</p>
</div>
<h2>Basic Nav-tabs</h2>
<div class="container">
<h3>Inline List</h3>
<ul class="list-inline">
<li>Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>
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.
I'm newish to programming and brand new to HTML. Currently doing a class assignment for my Web Development class where we are making a web page for a fictional company called "DW Gift Company." One of the project requirements is a navbar at the top (not fixed) that leads to a few different sub-pages (About, Items, Order, etc.). However, I'm stuck on the navbar part and can't seem to get the navbar to look right.
Here's my code below. I've got the nav tag with what I'm fairly sure are the correct classes along with ul's and li's (I know ul is an un-ordered list but I'm not 100% sure what li is. I'm following an online vid from my prof and I'm Germ X level(99.9%) sure I've followed along right and typed exactly what he has but mine looks nothing like his(I've attached what its supposed to look like and what mine looks like as well as what he has).
My code:
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/DWstyle.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<img src="C:\Users\Mason\Desktop\h4_starter\DWGiftLogo.png">
<nav class="navbar navbar-expand-lg navbar-light bg-beige">
<a class="navbar-brand">DW Gift Company</a>
<div class="collapse navbar-collapse" id="DWnavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 9</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
Roughly what I want it to look like.
What mine looks like.
What my prof's looks like.
I imagine the bullets have something to do with the li's but I'm not sure.
Tl;dr: I'm trying to make a navbar in HTML for a website and it isn't looking like it's supposed to even though I feel like I've followed my instructors code exactly from his online video.
Try this code instead. I feel like your code is a bit hard for newbie to understand, and if you really want to know more about web development learn CSS rather than taking a leap to Bootstrap.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<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="row">
<div class="navbar-header">
<img src="C:\Users\Mason\Desktop\h4_starter\DWGiftLogo.png">
<a class="navbar-brand">DW Gift Company</a></div>
<div class="collapse navbar-collapse" id="DWnavbar">
<ul class="nav navbar-nav">
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">item 2 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
</body>
</html>
Include bootstarp's files From its CDN paths like this
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
Most probably your files were not present where you are expecting them to be as per your your html code.
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
These 2 lines mean that your css(bootstrap.min.css and bootstrap-theme.css) must be present in a folder named css parallel to the html.
You should either download the boostrap's css and keep them in folder named css parallel to your html file or just access the files from their CDN path (which is hosted by bootstrap itself) .
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-beige">
<a class="navbar-brand"><img src="C:\Users\Mason\Desktop\h4_starter\DWGiftLogo.png">DW Gift Company</a>
<div class="collapse navbar-collapse" id="DWnavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 9</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
I don't want to do your homework for you, but I can point you in the right direction.
If you are using Bootstrap 4, take a look at this page
https://getbootstrap.com/docs/4.0/components/navbar/
If you are using Bootstrap 3, take a look at this page
https://getbootstrap.com/docs/3.3/examples/navbar/
I have this simple code in HTML using Bootstrap classes to create a navigation bar. I want my navigation bar to be horizontal so I added the navbar-inverse class. However, my navigation bar keeps showing vertical and I can't figure out why it does that even thought I tried different things to fix it.
<div class="blog-masthead">
<div class="container">
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="blog-nav-item active" href="#">Home</a></li>
<li class="nav-item"><a class="blog-nav-item" href="#">New features</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="blog-nav-item" href="#">{{ Auth::user()->name }}</a></li>
</ul>
</nav>
</div>
</div>
I hope navbar-inverse is nothing to do with menu view style I hope it's used to change the color of the menu text and for the view style you should use nav-link in a tag and nav-toggleable in nav tag I hope it's the answer.
I'm sorry if I misunderstood your question
<ul class="nav navbar-nav ">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">New features</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="nav-item" href="#">{{ Auth::user()->name }}</a></li>
</ul>
</nav>
</div>
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>