I have installed bootstrap 3 in my angular 4 project using the npm installer. I have a basic site done up and am trying to get an dynamic sideNav bar that will toggle in and out.
I have seen some examples online however they do not seem to work whether it be a newer version of bootstrap or compatibility issues with angular.
Does anyone have any recommendations for a navigation bar that I could use in this instance?
The HTML in my app.component.html:
<!-- Sidebar -->
<script src="src/Javascript/sidebar.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-left" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Brand
</a>
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
Events
</li>
<li>
Team
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Works <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>About</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</nav>
First You need to Import bootstrap 3 or Use Bootstrap 3 CDN
Then Instead of using JQuery Use Directive to manipulate Class and Style of Side Bar
I Have Created Stack blitz for same side Bar without using JQuery Check this: https://stackblitz.com/edit/angular-z6hrob
You are probably missing following JS Libraries in your code, add these in your index.html near end of <body> tag:
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Popper.JS -->
<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>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
Related
This question already has answers here:
Bootstrap horizontal drop down
(5 answers)
How to display dropdown menu items of bootstrap navbar in a horizontal manner rather than vertical?
(1 answer)
Closed 8 months ago.
I have used below code to get bootstrap tabs. I get the output as below:
Can I use above same code to get a horizontal tab list after click web instead of vertical menu? I need output as below:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h3>A demo of Bootstrap Tabs</h3>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Java</li>
<li>C#</li>
<li>MySQL</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>jQuery</li>
<li>Bootstrap</li>
<li>HTML</li>
</ul>
</li>
</ul>
</li>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="hometab">Write something for home tab</div>
<div class="tab-pane" id="javatab">The Java is an object-oriented programming language that was developed by James Gosling from the Sun Microsystems in 1995.
</div>
<div class="tab-pane" id="csharptab">C# is also a programming language</div>
<div class="tab-pane" id="mysqltab">MySQL is a databased mostly used for web applications.</div>
<div class="tab-pane" id="jquerytab">jQuery content here </div>
<div class="tab-pane" id="bootstab">Bootstrap Content here
<ul>
<li>Bootstrap forms</li>
<li>Bootstrap buttons</li>
<li>Bootstrap navbar</li>
<li>Bootstrap footer</li>
</ul>
</div>
<div class="tab-pane" id="htmltab">Hypertext Markup Language</div>
</div>
</body>
Do I need some more libraries to do this? Is this existing method(which can get from the library) is limited to that type of output only
Simply add this css code:
.open>.dropdown-menu {
display: flex !important; /* Use "important" if your css code before bootstrap lib loaded */
}
I have a Bootstrap Navbar that has lot of tabs. The Bootstrap Nav Bar looks like this.
Is there any way to prevent it.
The HTML Code:
<link rel="stylesheet" href="CDNs/bootstrap.css">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">v1.0</a>
</div>
<ul class="nav navbar-nav">
<li style="float:right">Upload</li>
<li style="float:right">Events of ©</li>
<li style="float:right">Tracker</li>
<li style="float:right"><span class="glyphicon glyphicon-pencil"></span> Return</li>
<li style="float:right"><a href="#"><span class="glyphicon glyphicon-inbox"></span> My< /a></li>
<li style="float:right"><span class="glyphicon glyphicon-user"></span> SignOut</li>
<li style="float:right"><a class="navbar-brand" href="#"><?php
echo "Logged in as " . $_SESSION["username"] . "<br>";
?></a></li>
</ul>
</div>
</nav>
*I have masked few tab names and edited the tab names in the code due to security issues*
Thanks,
If what you need is to have them all in one line, this fiddle should work.
These were the only properties needed:
.nav.navbar-nav {
display: inline-block;
float: right;
}
ul.nav.navbar-nav > li {
display: inline-block;
}
Here is the image:
You can see all tabs are in order (the signOut tab looks like that because it has an anchor tag on top of it).
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
There are few mistakes in your markup
1) There is an extra space on your closing < /a> tag in your "My" option
<li style="float:right"><a href="#"><span class="glyphicon glyphicon-inbox"></span> My< /a></li>
Remove this.
2) Next remove all your inline style (float:right;). If you want to shift all towards right then just add the class navbar-right to your <ul> like this
<ul class="nav navbar-nav navbar-right">
<li></li>
<li></li>
<li></li>
</ul>
Codepen here
I'm trying to show the active tag on my nav bar. It shows on all tabs EXCEPT one with a drop-down. I can't figure out why its not calling the class on this particular button. I'm obviously placing it in the wrong place. Any help with this issue would be much appreciated!
Code: (The first one is CORRECT - ie - index.php is currently active. Where do I place the code (class="active") to make the next button (WHAT WE DO) the active tab when clicked?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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"/>
<nav>
<ul class="list-inline">
<li class="active">
<i class="fa fa-home"> </i>HOME
</li>
<li class="dropdown" role="presentation">
WHAT WE DO <span class="caret"></span>
<ul class="dropdown-menu">
<li>QUALITATIVE</li>
<li>QUANTITATIVE</li>
</ul>
</li>
<li> WHERE WE WORK</li>
<li> OUR CLIENTS </li>
<li> CONTACT US</li>
</ul>
</nav>
If I understand you correctly, you need to check the URL. (In my demo I set it to a specific URL) Then, add a class to the li parent.
var page = 'whatwedo_qualitative.php';
var a = $('[href="' + page + '"]');
$('.dropdown').has(a).addClass('active');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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"/>
<nav class="navbar-default">
<ul class="nav navbar-nav list-inline">
<li>
<i class="fa fa-home"> </i>HOME
</li>
<li class="dropdown" role="presentation">
WHAT WE DO <span class="caret"></span>
<ul class="dropdown-menu">
<li>QUALITATIVE</li>
<li>QUANTITATIVE</li>
</ul>
</li>
<li> WHERE WE WORK</li>
<li> OUR CLIENTS </li>
<li> CONTACT US</li>
</ul>
</nav>
you need a javascript code to add/remove active class to the a link pressed.. something like this:
$("a").click(function() {
//remove all active class from a elements
$(this).addClass("active"); //add the class to the clicked element
});
a similar functionality is here: Add and remove a class on click using jQuery?
I'm learning bootstrap for the first time and the dropdown menu seems to be unformatted and doesn't look like the other menu options that I've made. Its also not appearing when clicked, but I followed a tutorial exactly. Any ideas on the problem or mistakes?
<html>
<head>
<title>Bootstrap Testing</title>
<link rel="stylesheet" type="text/css" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class='navbar navbar-inverse'>
<div class='container-fluid'>
<!--Logo-->
<div class='navbar-header'>
<a href="#" class='navbar-brand'>MY LOGO</a>
</div>
<!--Menu Items-->
<div>
<ul class='nav navbar-nav'>
<li class='active'>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<!--drop down menu-->
<li class='dropdown'>
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>Friends</li>
<li>Photos</li>
<li>Settings</li>
</ul>
</li>
</div>
</nav>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js" type="text/javascript"></script>
</body>
You need to place the <li class='dropdown'> within the <ul class='nav navbar-nav'>. (The presence of an <li> element without a parent list element should probably be cause for alarm in any case.)
So that part of your HTML should be shuffled to look like:
<!-- [...] -->
<!--Menu Items-->
<div>
<ul class='nav navbar-nav'>
<li class='active'>Home</li>
<li>About</li>
<li>Contact</li>
<!--drop down menu-->
<li class='dropdown'>
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>Friends</li>
<li>Photos</li>
<li>Settings</li>
</ul>
</li>
</ul>
</div>
<!-- [...] -->
Here's a Bootply of the revised code. Hope this helps! Let me know if you have any questions.
The bootstrap.min.js needs to come after you load jquery. I always like to start my documents with the basic template bootstrap shows here: http://getbootstrap.com/getting-started/#template
It makes it a lot easier to make sure I have everything loading and in the right order.
You will also want to move your dropdown li to be inside your ul with the "nav navbar-nav" class. Like this:
<ul class='nav navbar-nav'>
<li class='active'>Home</li>
<li>About</li>
<li>Contact</li>
<!--drop down menu-->
<li class='dropdown'>
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>Friends</li>
<li>Photos</li>
<li>Settings</li>
</ul>
</li>
</ul>
I'm working with twitter bootstrap responsive nav bar and I'm trying to figure out how to make the brand show up only when the nav bar is in collapsed mode.
I'm thinking there might need to be some extra js involved but i'm not sure what that is or where to put it.
Here's what I've got:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Navigation</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav nav-pills">
<li>Nav 1</li>
<li>Nav 2</li>
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
Programs
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- links -->
<li>Program 1</li>
<li>Program 2</li>
<li>Program 3</li>
<li class="divider"></li>
<li>Program A</li>
<li>Program B</li>
<li>Program C</li>
</ul> <!-- closes dropdown menu -->
</li> <!-- closes dropdown class -->
</ul> <!-- closes nav-pills -->
</div> <!-- closes collapse -->
</div> <!-- closes container -->
</div> <!-- closes navbar-inner -->
</div> <!-- closes overall navbar -->
Right now, brand displays all the time, but I want it to display only when in collapsed mode so viewers know that is the nav bar. They don't need to see it in larger screen modes.
Any resource might help.
Thanks for your time.
Craig
An easy way to solve this problem is to use the Responsive utility classes provided by Bootstrap:
Bootstrap 4:
Source
Bootstrap 4 alpha:
Bootstrap 3:
Example:
<a class="brand hidden-lg" href="#">Navigation</a>
Bootstrap 2:
Example:
<a class="brand hidden-desktop" href="#">Navigation</a>
For Bootstrap 3 use the below classes
Ref: http://getbootstrap.com/css/#responsive-utilities-classes
Since Bootstrap3.2 visible-xs, visible-sm etc. are deprecated. Reference: http://getbootstrap.com/css/#responsive-utilities-classes
So in this case you should use either:
<a class="brand visible-xs-block" href="#">Navigation</a>
or
<a class="brand visible-xs-inline" href="#">Navigation</a>
or
<a class="brand visible-xs-inline-block" href="#">Navigation</a>
depending what type of display property should be applied to this link.
This will display your Navigation brand link only when your navigation is collapsed