I am trying to include NavBar in my html code, but it is not succeeding since the integrity parameter in the link statement is posing a problem.
I have included to change the integrity parameter to other values, yet the problem persists.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css2.css">
<link href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrapcdn.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title></title>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
</body>
</html>
I expected a perfect NavBar to be displayed.
It instead results in an ordinary unordered list.
Change your bootstrap links to
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css2.css">
<link href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title></title>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
</head>
</html>
Related
How do I change the look of tabs like this (need not be green colot, instead primary color of boostrap works for me)
instead of
<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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">Disabled</a>
</li>
</ul></body>
</html>
Add this to your CSS:
a.nav-link.active {
border: transparent;
border-bottom: 4px solid green !important;
}
<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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">Disabled</a>
</li>
</ul>
</body>
</html>
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>
So im trying to make a website for a college project and i need to do a navbar with bootstrap. The problem is that when im adding new nav-item elements to the navbar they are aligned one below other in the Y axis and i would like to align them horizontally
this is what i have until now
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<nav class="navbar sticky-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">Home Page</a>
<ul class="nav navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Item One</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item Two</a>
</li>
</ul>
</nav>
</body>
</html>
This is how the items are beeing displayed.
How can I align "Item One" and "Item Two" horizontally?
According to Bootstrap's documentation you must specify the wrapping :
Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
Just add this to your <nav> item :
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Home Page</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Item One</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item Two</a>
</li>
</ul>
</nav>
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>
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/