Hi, I am trying to add bootstrap with angular project and the styling is not reflecting in the browser.
The details are as below.
Versions:
Angular CLI: 1.7.3
Node: 9.7.1
OS: win32 x64
Angular: 5.2.8
installed bootstrap and jquery using angular cli
"bootstrap": "^4.0.0"
"jquery": "^3.3.1"
in .angular-cli.json added as below
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
Below is the code in my html.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<span class="navbar-brand">Angular + Bootstrap</span>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">
Link <span class="sr-only">(current)</span>
</a></li>
<li>Link</li>
<li class="dropdown" dropdown> <!-- {1} -->
<a dropdownToggle role="button"> <!-- {2} -->
Dropdown <span class="caret"></span></a>
<ul *dropdownMenu class="dropdown-menu"> <!-- {3} -->
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</nav>
I am getting the view in browser as below and not getting any errors in the browser console.
output in browser
Thanks for your help in advance.
you have installed bootstrap 4 and using bootstrap 3 version navbar code.
here the sample code for bootstrap 4 navbar.Some classes has been changed in latest bootstrap 4 version.
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
for more info refer this link
Try this
Go to app folder --> src
Open style.css and paste below code
#import "~bootstrap/dist/css/bootstrap.css";
Related
Could you please help me to do menu:
I found a link like that
`http://jsfiddle.net/KyleMit/6cu8f43m/`
but it doesn't get full width navbar with a container menu items
In that code also mentioned that details for full-width sub-menu items.
choose the full-width in all the li items. like below:
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Fill Width <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
just change the class of outermost div to navbar instead of container.
Or better just use <nav> </nav> instead of outermost <div class="container"> </div>
Try This
JFiddle Demo Here
snippet Example Below
.full-width.dropdown {
position: static;
}
.full-width.dropdown > .dropdown-menu {
left: 0;
right: 0;
position: absolute;
}
.full-width.dropdown > .dropdown-menu > li > a {
white-space: normal;
}
.fill-width.dropdown {
position: static;
}
.fill-width.dropdown > .dropdown-menu {
left: auto;
position: absolute;
}
.fill-width.dropdown > .dropdown-menu > li > a {
white-space: normal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="navbar navbar-inverse">
<!-- Header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
Bootstrap 3 Skeleton
</a>
</div>
<!-- Navbar Links -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Normal <span class="caret"></span>
</a>
<ul class="dropdown-menu " role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Full Width <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Fill Width <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
About this SO Question:
<a href='http://stackoverflow.com/q/26147186/1366033'>
How To Restrict Width of Bootstrap 3 Dropdown Menu
</a><br/>
Fork This Skeleton Here:
<a href='http://jsfiddle.net/KyleMit/kcpma/'>
Bootstrap 3 Skeleton
</a><br/>
</div>
I've seen this topic,
Bootstrap 3 collapsed menu not working on mobile screens
but still couldnt resolve, i get the button, but it doesn't work
<!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">
<title>GREENLUX</title>
<!-- Bootstrap -->
<link href="http://greenlux.pt/apresentacao/css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav>
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <!-- -->
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://greenlux.pt"><img src="http://greenlux.pt/logo_gl.png" width="125" height="21" alt=""/></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Início <span class="sr-only">(current)</span> </li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li>GU10 </li>
<li class="dropdown"> E27 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Par30 </li>
<li>Par38 </li>
</ul>
</li>
<li class="dropdown"> R7S <span class="caret"></span>
<ul class="dropdown-menu">
<li role="separator" class="divider"></li>
<li> 360º</li>
<li role="separator" class="divider"></li>
<li>78mm </li>
<li>118mm </li>
<li>138mm </li>
<li role="separator" class="divider"></li>
<li> 180º</li>
<li role="separator" class="divider"></li>
<li>118mm </li>
</ul>
</li>
<li>G24 </li>
<li class="dropdown"> 2G11 <span class="caret"></span>
<ul class="dropdown-menu">
<li>10W </li>
<li>32W </li>
</ul>
</li>
<li class="dropdown"> SPOT <span class="caret"></span>
<ul class="dropdown-menu">
<li>Redondo </li>
<li>Quadrado </li>
</ul>
</li>
<li class="dropdown"> DOWNLIGHTS <span class="caret"></span>
<ul class="dropdown-menu">
<li>15W </li>
<li>30W </li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">PLAFON
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Redondo </li>
<li>Oval </li>
</ul>
</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>Separated link </li>
<li role="separator" class="divider"></li>
<li>One more separated link </li>
</ul>
</li>
-->
</ul>
<!--
<ul class="nav navbar-nav navbar-right hidden-sm">
<li>Link </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>Separated link </li>
</ul>
</li>
</ul>
-->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://greenlux.pt/apresentacao/js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://greenlux.pt/apresentacao/js/bootstrap.js"></script>
</body>
</html>
and btw, how can i put the menus open by mouse hover?
i've tried already and couldn't do it
You need to put at least a class of navbar on your nav tag. But apperently there was something else wrong so here is a working example of the default navbar. From there you can change the CSS to your liking. I also added one change to make the dropdowns appear on hover.
https://jsfiddle.net/gno4zcrr/1/
.dropdown:hover .dropdown-menu {
display: block;
}
<script src="https://code.jquery.com/jquery-2.2.4.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"/>
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://greenlux.pt">
<img src="http://greenlux.pt/logo_gl.png" width="125" height="21" alt="" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>GU10 </li>
<li class="dropdown">
E27 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Par30 </li>
<li>Par38 </li>
</ul>
</li>
<li class="dropdown">
R7S <span class="caret"></span>
<ul class="dropdown-menu">
<li role="separator" class="divider"></li>
<li> 360º</li>
<li role="separator" class="divider"></li>
<li>78mm </li>
<li>118mm </li>
<li>138mm </li>
<li role="separator" class="divider"></li>
<li> 180º</li>
<li role="separator" class="divider"></li>
<li>118mm </li>
</ul>
</li>
<li>G24 </li>
<li class="dropdown">
2G11 <span class="caret"></span>
<ul class="dropdown-menu">
<li>10W </li>
<li>32W </li>
</ul>
</li>
<li class="dropdown">
SPOT <span class="caret"></span>
<ul class="dropdown-menu">
<li>Redondo </li>
<li>Quadrado </li>
</ul>
</li>
<li class="dropdown">
DOWNLIGHTS <span class="caret"></span>
<ul class="dropdown-menu">
<li>15W </li>
<li>30W </li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">PLAFON
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Redondo </li>
<li>Oval </li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I am working on a website in HTML and CSS. I have installed bootstrap and added in a navbar. The problem is that the navbar has two dropdown menus, neither of which are working. They show up in the navbar, but clicking on them does nothing.
Here is the code header information:
<link type="text/css" rel="stylesheet" href="my_portfolio.css">
<link href='https://fonts.googleapis.com/css?family=Cabin:500' rel='stylesheet' type='text/css'>
Here is the code for the navbar:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Skills<span class="sr-only">(current)</span></li>
<li class="dropdown">
Projects<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>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li>Schools</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Contact Me<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>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
And here is the Bootstrap JS info I added to the bottom of the body:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
For the Bootstrap Navbar element to work, you will also need the Bootstrap css file - get it here:
http://getbootstrap.com/getting-started/
or just insert this into your header:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
Make sure you have jQuery in your header too:
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
Working jsfiddle: https://jsfiddle.net/jsheridan390/3fuhLayt/
Be careful u are including bootstrap js below the jquery and also check console is there any error ?
Do you have include jquery into head ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
just change href="#" to href=""
Contact Me<span class="caret"></span>
<ul class="dropdown-menu">
Working fiddle https://jsfiddle.net/DTcHh/15547/
basically I used the demo and I am sure all the js are loaded correctly .... really need help.
The button just cannot toggle
Following are my JS and css
<link href="/static/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/static/css/jumbotron.css" rel="stylesheet">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/static/js/ie10-viewport-bug-workaround.js"></script>
<ul class="nav navbar-nav navbar-right">
<li>Link</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>Separated link</li>
</ul>
</li>
</ul>
`
This is the core content of my index.html file:
<div role="navigation" class="navbar navbar-default navbar-static-top navbar-inverse " data-ng-contoller="NavController">
<div class="container">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Bootstrap theme
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-class="{active: isHome()}">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>New Message</li>
<li>List Messages</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div data-ng-view="" id="main-container" class="container" role="main"></div>
This is how my app is bootstrapped:
define(['app', 'jquery', 'bootstrap', 'angular' ], function(app, jQuery, bootstrap, angular) {
jQuery('.dropdown-toggle').dropdown();
require(['domReady!'], function (document) {
angular.bootstrap(document, ['app']);
});
});
All of the other controllers work just fine. The only thing I can guess is that for some reason it's being ignored by the bootstrap.
All of the dependencies are loaded with requirejs, and I can see that the code is loaded fine with no errors in the console (including the controller that doesn't work). Any ideas on how to track this down?
It was a typo. I had contoller not controller.