I'm designing a website and have a problem. I use the Glyphicon of bootstrap 3.0.0 to design a picture icon "Cart". However,it do not working. My Error like this picture. Please help me!
Thanks you watching
This code below:
<!--import CSS-->
<link href="../bootstrap/bootstrap.css" rel="stylesheet"/>
<link href="../bootstrap/bootstrap.min.css" rel="stylesheet"/>
<link href="../effect/hover.css" rel="stylesheet"/>
<link href="../css/effecttext.css" rel ="stylesheet"/>
<link href="../effect/hover-min.css" rel="stylesheet"/>
<link href="../css/style.css" rel="stylesheet"/>
----------------------------------------------------
<ul class="nav navbar-nav navbar-right">
<li>
Cart <span class="glyphicon glyphicon-shopping-cart"></span>
</li>
</ul>
-------------------------------------------
<!--Javascript-->
<script src="main.js"></script>
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
Try Adding CDN
Also Remove following lines
<link href="../bootstrap/bootstrap.min.css" rel="stylesheet"/>
And
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav navbar-nav navbar-right">
<li>
Cart <span class="glyphicon glyphicon-shopping-cart"></span>
</li>
</ul>
Related
So I wanted to add nav-bar to my page using bootstrap but it just won't show up for some reason, I've properly downloaded bootstrap files and jquery 3.5.1 and everything but my navbar still won't show up, I'm not sure if this will help but when I inspect the page(console gives no errors btw), it shows that the styles from bootstrap are being overridden
Bootstrap styles are not being applied
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset ="utf-8">
<meta name= "viewport" content = "width=device-width, initial-scale =1">
<title>Solution Assignment Module-3!</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
</div>
</nav>
</header>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
You got this error because you added latest version of bootstrap CSS file and "navbar-default" not supported on latest version.
You can use older version of bootstrap CSS like I did here or add latest nav bar code according to latest version of bootstrap.
You can try this code.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset ="utf-8">
<meta name= "viewport" content = "width=device-width, initial-scale =1">
<title>Solution Assignment Module-3!</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav mr-auto">
<li class="nav-item active">
menu1
</li>
<li class="nav-item">
menu2
</li>
<li class="nav-item">
menu3
</li>
<li class="nav-item">
menu4
</li>
<li class="nav-item">
menu5
</li>
</ul>
</div>
</nav>
</header>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>OmniFood</title>
<!--Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,400,900|Ubuntu&display=swap" rel="stylesheet">
<!--CSS Stylesheets-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="vendors/css/style.css">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/29ae7bcec9.js" crossorigin="anonymous"></script>
<!--bootstrap scripts-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<section >
<div class="container-fluid">
<nav class="navbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link"href="#">FOOD DELIVERY</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">HOW IT WORKS</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">OUR CITIES</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">SIGN UP</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
so my code is working but it is not coming in a single line which is supposed be want my nav bar elements on right in a single line but they are coming line by line
i tried to do it in css using display inline-block but still not working out
Add class flex-row on <ul class="navbar-nav ml-auto flex-row">
Its working fine, as its responsive so i think you are using small devices thats why its in block if you still need in a row add class flex-row with navbar-nav
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>OmniFood</title>
<!--Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,400,900|Ubuntu&display=swap" rel="stylesheet">
<!--CSS Stylesheets-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="vendors/css/style.css">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/29ae7bcec9.js" crossorigin="anonymous"></script>
<!--bootstrap scripts-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<section >
<div class="container-fluid">
<nav class="navbar navbar-expand-lg">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link"href="#">FOOD DELIVERY</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">HOW IT WORKS</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">OUR CITIES</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">SIGN UP</a>
</li>
</ul>
</nav>
</div>
</section >
</body>
</html>
Add style for list 'display:inline-block' also add CSS for '.navbar-nav{display:inline-block !important}'.
.navbar-nav{display:inline-block !important;}
li.nav-item {
display: inline-block;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,400,900|Ubuntu&display=swap" rel="stylesheet">
<!--CSS Stylesheets-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="vendors/css/style.css">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/29ae7bcec9.js" crossorigin="anonymous"></script>
<!--bootstrap scripts-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="container-fluid">
<nav class="navbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link"href="#">FOOD DELIVERY</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">HOW IT WORKS</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">OUR CITIES</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">SIGN UP</a>
</li>
</ul>
</nav>
</div>
I am trying to set a fixed navbar that has a scrolling effect. Logo, links are on the left hand side and the sign up and log in are aligned on the right hand sign with icon. when I try to run the code, its not looking like it suppose to. I've tried a few ideas and looked up every idea and template design and used plenty of references and I am still stuck.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title> Kappa Delta Rho - Psi Beta </title>
</head>
<body>
<!-- Fixed Navigation -->
<nav class="navbar fixed-top navbar-dark" style=" background-color: #00008B">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> KDR LOGO </a>
</div>
<ul class="nav navbar-nav">
<li class="active"> Welcome </li>
<li> About </li>
<li> History </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
<!-- End of Fixed Navigation -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
Try remove fixed-top.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title> Kappa Delta Rho - Psi Beta </title>
</head>
<body>
<!-- Fixed Navigation -->
<nav class="navbar navbar-dark" style=" background-color: #00008B">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> KDR LOGO </a>
</div>
<ul class="nav navbar-nav">
<li class="active"> Welcome </li>
<li> About </li>
<li> History </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
<!-- End of Fixed Navigation -->
<br><br><br><br><br><br><br><br><br><br><br>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
I'm trying to get my navbar items to align rather than stack. I switched from bootstrap 3 to 4 (beta 2) and for some reason it doesn't nicely align anymore but remains stacked. Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index__</title>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<nav class="navbar fixed-top">
<div class="container">
<span class="pull-left">
<a href="#" class="navbar-brand">
<img src="img/gyn_sm.png" alt="">
</a>
</span>
<ul class="nav navbar-nav ml-auto">
<li>one</li>
<li>two</li>
</ul>
</div>
</nav>
</body>
</html>
Look at this updated JSFiddle to get the answer. Your .navbar-nav gets display: flex;, but not its direction. Adding this to the CSS as:
.navbar-nav {
flex-direction: row;
}
will fix it. Read more about flex-direction on MDN.
I have an angular2 website that uses bootstrap and it worked perfectly fine for 2 months. Today many of bootstrap's features just disappeared. Below is the image - the white stripe on the top is where the nav bar used to be - the navbar's title is still there, but color and other items, like login, register etc are not visible (or not there anymore). I've tried to change bootstrap 3.3.7 to 4beta, but the result is still the same...
That's how it looked before:
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image Annotation</title>
<base href="/">
<link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.css">
<!--link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<app-root></app-root>
<!--script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script-->
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
navbar.component.html:
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" routerLink="/">Imaging Annotation and Management</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li *ngIf="authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a routerLink="/dashboard">Dashboard</a></li>
<li><a *ngIf="authService.loggedIn()" routerLink="/profile" >Profile</a></li>
<li><a *ngIf="authService.loggedIn()" routerLink="/anno" >Annotation</a></li>
<li><a *ngIf="!authService.loggedIn()" routerLink="/login" >Login</a></li>
<li><a *ngIf="authService.loggedIn()" href="#" (click)="onLogoutClick()">Logout</a></li>
<li *ngIf="!authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a routerLink="/register" >Register</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
I'm back in business)) the problem was with this code:
<link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.css">
I switched to standard bootstrap and it now works:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">