I have navbar made by bootstrap, all navbar items appears after I run the project but the "dropdown list" item not work when I click on it
I have this header:
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<link href="css/Style.css" rel="stylesheet" /><meta name="viewport" content="width=device-width, initial-scale=1" />
And this the navbar code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/Style.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="Default.aspx">MHM CAMM</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Convert<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Currency</li>
<li>Mass Measurements</li>
</ul>
</li>
<li>About</li>
<li>Login</li>
</ul>
</div>
</nav>
When I click Convert button the dropdown list not apears
My project uses asp.net and the IDE is VS2017
How to fix this please?
The order of your libraries is wrong. jQuery must be incuded before boostrap:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="Default.aspx">MHM CAMM</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Convert<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Currency</li>
<li>Mass Measurements</li>
</ul>
</li>
<li>About</li>
<li>Login</li>
</ul>
</div>
</nav>
Related
i am making a project with bootstrap 4 and the blue color which i want to add to its body is not adding up . i have include the site with the bootstrap cdn and the one of my style sheet
html file
<!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">
<!-- our css -->
<link rel="stylesheet" href="./app.css">
<!-- Bootstrap CSS -->
<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="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Raleway:100,300,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
<title>Aurora Grove</title>
</head>
<body>
<!-- navbar come from here -->
<nav class="navbar navbar-expand-sm navbar-dark ">
<a class="navbar-brand" href="#">Aurora Grove</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<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="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">explore</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">book</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
css file
body
{
background-color: blue ;
}
You probably defined the wrong path:
<link rel="stylesheet" href="./app.css">
Try this:
href="../app.css"
You should also include file architecture in the question so we could see where your CSS file is...
html > body
{
background-color: blue ;
}
<!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">
<!-- our css -->
<link rel="stylesheet" href="./app.css">
<!-- Bootstrap CSS -->
<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="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Raleway:100,300,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
<title>Aurora Grove</title>
</head>
<body>
<!-- navbar come from here -->
<nav class="navbar navbar-expand-sm navbar-dark ">
<a class="navbar-brand" href="#">Aurora Grove</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<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="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">explore</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">book</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
I'm trying to set up a local Laravel website to learn the new features and differences in Laravel 5.6. However, when trying to place a Font Awesome icon in the navbar-brand in Bootstrap 4 it won't seem to load. When I check out the element in the inspector in Chrome the elements dimensions are 0x0. I tried adding width and height of 90px just to see the icon but it still won't show. Any ideas?
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a href="{{ route('/') }}" class="navbar-brand">
<i class="fa fa-laptop-code"></i>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsedContent">
<ul class="navbar-nav">
<li class="nav-item active">
Home
</li>
</ul>
</div>
</nav>
<!-- NAVBAR -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 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>
fa-laptop-code is not available in the version of font-awesome you are loading.
You are loading 4.7, but if you want to use that icon you need to load FontAwesome 5
Use this CDN instead: https://use.fontawesome.com/releases/v5.2.0/css/all.css
Try this, it will work
<i class="fa fa-laptop"></i>
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a href="{{ route('/') }}" class="navbar-brand">
<i class="fa fa-laptop"></i>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsedContent">
<ul class="navbar-nav">
<li class="nav-item active">
Home
</li>
</ul>
</div>
</nav>
<!-- NAVBAR -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 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>
I am build an application with Twitter Bootstrap and Thymeleaf (Java / Spring). I cannot get the dropdown menu with bootstrap 3 to open, even when I copy the code from there examples.
Oddly it seems to work is JS fiddle https://jsfiddle.net/w5bq2L65/
Here is the HTML that is being generated.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
<title>Parameter Manager</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="">
<meta name="description" content="" />
<meta name="title" content="">
<link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<!-- header -->
<header>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">POS Parameter Manager</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- page content -->
<section>
<div class="container">
<p>Parameters can be found here</p>
</div>
</section>
<!-- common scripts -->
<script type="javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
</body>
</html>
I just can't figure out why my dropdown button is not working. I can't see any errors in the console, I have tried with calling css files in the head element and at the end of the body, that hasn't changed anything. This is my navigation menu with a dropdown button in it:
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand page-scroll" href="#page-top">SLEEKER</a>
</div>
<!-- Theme option content -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a ng-click="changeTheme(1)">Flatly</a></li>
<li><a ng-click="changeTheme(2)">United</a></li>
<li><a ng-click="changeTheme(3)">Cerulean</a></li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Theme option content -->
</div>
<!-- Container -->
</nav>
And I have included all the files needed at the bottom:
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="css/bootstrap.{{theme}}.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="css/spinner.css" />
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<!-- scripts -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<!-- load angular libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
<!-- APP scripts -->
<script src="app/hotels/hotels.js"></script>
Because you are missing the bootstrap.js
take a look with your nav
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand page-scroll" href="#page-top">SLEEKER</a>
</div>
<!-- Theme option content -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a ng-click="changeTheme(1)">Flatly</a>
</li>
<li><a ng-click="changeTheme(2)">United</a>
</li>
<li><a ng-click="changeTheme(3)">Cerulean</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Theme option content -->
</div>
<!-- Container -->
</nav>
I am newbie to bootstrap, trying to get a make a template.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Tech Site
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
Top image is what i wanted, but, what i am getting is the below output,
As one can see in the image, the links are in the same line as the brand name, which i do not want, it should be in the next line.
Style like this.
<ul class="nav navbar-nav">
to
display:block;