Navbar toggle doesn't work in my angular component - javascript

Do someone see problem? I tried with replacing position of bootstrap
and jquery imports in this html. This work in online html renderer. Does this have some relation with angular?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navbar navbar-inverse ">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<button class="navbar-toggle" data-target="#navbarToggler" data-toggle="collapse"><span
class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<div class="navbar-header">
<a class="navbar-brand">PROJECT</a>
</div>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="nav navbar-nav">
<li class="active"><a>Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href=""><span
class="glyphicon glyphicon-download-alt"></span>Download</a></li>
<li><a href=""><span class="glyphicon glyphicon-log-in"></span>
Login</a></li>
<li><a href="register"><span
class="glyphicon glyphicon-user"></span> Register</a></li>
<li> Logout</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Related

$ is used before defined bootstrap Jquery

I was just following the tutorial at linda.com and faced problem
I have index bootstrap.js and are being used in different folder
I think this is file location problem....or not.
I attached a photo of my project
structure
and my index code is like this
<!doctype>
<html>
<head>
<title>Happy Card---Home</title>
<meta charset="utf-8">
<meta http-equiv="X-US-Compatible" content="Chrome">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="js/myscript.js">
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<link href="https://fonts.googleapis.com/css?family=Chewy|Covered+By+Your+Grace|Dancing+Script|Graduate|Great+Vibes|Orbitron|Oswald|Permanent+Marker|Saira+Extra+Condensed" rel="stylesheet">
</head>
<body id="Home">
<section class="container">
<?php include "_/component/php/header.php"?>
<div class="content row">
<section class="main col col-lg-8">
</section><!---main--->
<section class="sidebar col col-lg-4">
</section><!---sidebar--->
</div><!---content--->
</section><!---container--->
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/myscript.js"></script>
</body>
$(function(){
$('ul.nav il.dropdown').hover(function(){
$('.dropdown-menu',this).fadeIn();
}, function(){
$('.dropdown-menu',this).fadeout('fast');
});
});
<!doctype>
<html>
<head>
<title>Happy Card---Home</title>
<meta charset="utf-8">
<meta http-equiv="X-US-Compatible" content="Chrome">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="js/myscript.js">
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
</head>
<body id="Home">
<section class="container">
<?php include "_/component/php/header.php"?>
<div class="content row">
<section class="main col col-lg-8">
</section><!---main--->
<section class="sidebar col col-lg-4">
</section><!---sidebar--->
</div><!---content--->
</section><!---container--->
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/myscript.js"></script>
</body>
<footer>
</footer>
</html>
And header is like this
<div class="content row">
<div class="col-lg-12">
<header class="clearfix">
<section id="branding">
</section><!---branding-->
<nav class="navbar navbar-inverse">
<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="#">Batam Tour &
Living Info</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><a href="#">Home <span class="sr-only">(current)
</span></a></li>
<li>About us</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" role="button" aria-haspopup="true" aria-
expanded="false">Batam Tour <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>ATTRACTION</li>
<li>SHOPPING MALL</li>
<li>THINGS TO DO</li>
<li role="separator" class="divider"></li>
<li>RENT CAR</li>
<li role="separator" class="divider"></li>
<li>HAPPY CARD</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" role="button" aria-haspopup="true" aria-
expanded="false">Living Info <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>REAL ESTATE</li>
<li>BUSINESS ENVIRONMENT</li>
<li role="separator" class="divider"></li>
<li>BUSINESS CONSULTING</li>
<li role="separator" class="divider"></li>
<li>LIVING Q&A</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control"
placeholder="Search">
</div>
<button type="submit" class="btn btn-
default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header><!---header-->
</div><!---column-->
</div><!---content-->
You have two typos
il instead of li and fadeout instead of fadeOut and you unnecessary load myscript.js as a <link rel="stylesheet" - you can remove that line
If I add the JS and CSS and insert your header it works:
$(function() {
$('ul.nav li.dropdown').hover(function() {
$('.dropdown-menu', this).fadeIn();
}, function() {
$('.dropdown-menu', this).fadeOut('fast');
});
});
$(function() {
$('ul.nav li.dropdown').hover(function() {
$('.dropdown-menu', this).fadeIn();
}, function() {
$('.dropdown-menu', this).fadeOut('fast');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Chewy|Covered+By+Your+Grace|Dancing+Script|Graduate|Great+Vibes|Orbitron|Oswald|Permanent+Marker|Saira+Extra+Condensed" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<section class="container">
<div class="content row">
<div class="col-lg-12">
<header class="clearfix">
<section id="branding">
</section>
<!---branding-->
<nav class="navbar navbar-inverse">
<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="#">Batam Tour &
Living Info</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><a href="#">Home <span class="sr-only">(current)
</span></a></li>
<li>About us</li>
<li class="dropdown">
Batam Tour <span class="caret"></span>
<ul class="dropdown-menu">
<li>ATTRACTION</li>
<li>SHOPPING MALL</li>
<li>THINGS TO DO</li>
<li role="separator" class="divider"></li>
<li>RENT CAR</li>
<li role="separator" class="divider"></li>
<li>HAPPY CARD</li>
</ul>
</li>
<li class="dropdown">
Living Info <span class="caret"></span>
<ul class="dropdown-menu">
<li>REAL ESTATE</li>
<li>BUSINESS ENVIRONMENT</li>
<li role="separator" class="divider"></li>
<li>BUSINESS CONSULTING</li>
<li role="separator" class="divider"></li>
<li>LIVING Q&A</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-
default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
<!---header-->
</div>
<!---column-->
</div>
<!---content-->
<div class="content row">
<section class="main col col-lg-8">
</section>
<!---main--->
<section class="sidebar col col-lg-4">
</section>
<!---sidebar--->
</div>
<!---content--->
</section>
<!---container--->

jquery fadein on buttonclick

I'm making a Bootstrap site and I want jQuery to fade in my text on a button click. This is my code:
$(document).ready(function() {
$('div.hidden').fadeIn(1000).removeClass('hidden');
});
$(#homebutton).onclick(function() {
$('#homebutton.hidden').fadein(1000).removeClass('hidden');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">J&J Services</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Information</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<section class=" section0 homecontent col-md-12">
<div class="container-fluid">
<div class="hidden" style="display:none;">
<h1>welcome to J&J services.
<hr>
<button id="homebutton" class="btn btn-success btn-large">
click here to learn about us today.
</h1>
</div>
</div>
</section>
<section class="section1 information ">
<div class="container-fluid hidden"></div>
</section>
</div>
</section>
I'm new to jQuery and I don't know what I did wrong. Thanks in advance,
With revised HTML and jquery targets:
$(document).ready(function() {
$('.section0 .hidden').fadeIn(1000).removeClass('hidden');
});
$('#homebutton').on('click', function() {
$('.section1 .hidden').fadeIn(1000).removeClass('hidden');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">J&J Services</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Information
</li>
<li>Services
</li>
<li>Pricing
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<section class="section0 homecontent col-md-12">
<div class="container-fluid">
<div class="hidden" style="display:none;">
<h1>welcome to J&J services.
<hr>
<button id="homebutton" class="btn btn-success btn-large">
click here to learn about us today.
</button>
</h1>
</div>
</div>
</section>
<section class="section1 information ">
<div class="container-fluid hidden" style="display:none;">Information</div>
</section>
</section>
I think you wanna fade in section1 text when u click the button, update like this:
$('#homebutton').on('click', function() {
$('.container-fluid').fadeIn(1000).removeClass('hidden');
});

Active menu not highlighted in Boostrap and Javascript, how do I solve this?

I have tried to highlight the active menu bar via the code below but can not figure out why it is not working. Would someone kindly lead me through. Thank you.
Both my HTML and my Js scripts are below:
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Transactions
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Payments</li>
<li>Make Receipts</li>
<li>Payments on Date</li>
<li>Valuable Customer</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SMS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Bulk SMS</li>
<li>Most Valuable SMS</li>
<li>SMS</li>
</ul>
</li>
</ul>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</nav>
$(".nav a").on("click", function(){
$(".nav li").removeClass("active");
$(this).parent().addClass("active");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Transactions
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Payments</li>
<li>Make Receipts</li>
<li>Payments on Date</li>
<li>Valuable Customer</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SMS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Bulk SMS</li>
<li>Most Valuable SMS</li>
<li>SMS</li>
</ul>
</li>
</ul>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</nav>
You need to remove your add and then add CSS to force making active for sub menu and so on
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
ul li ul li .active {background: lightskyblue; }
</style>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Transactions
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" class="active" >Payments</a></li>
<li>Make Receipts</li>
<li>Payments on Date</li>
<li>Valuable Customer</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SMS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Bulk SMS</li>
<li>Most Valuable SMS</li>
<li>SMS</li>
</ul>
</li>
</ul>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</nav>

Bootstrap mobile menu button not visible

I'm not able to view the menu button of bootstrap menu when it is displayed in mobile view.In the same time I need to remove all the ui styling offered by the Bootstrap and have my own styling for navbar.
<nav class="navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</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>
</div>
</nav>
You should add navbar navbar-default or navbar navbar-inverse so you navigation links, button etc have color/states applied to them.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
If you want a transparent or white background uss CSS.
Docs
With navbar-default
<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" />
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</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>
</div>
</nav>
Transparent Background
.navbar.navbar-default {
background: transparent;
}
<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" />
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</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>
</div>
</nav>

Boostrap drop-down not working

It doesn't drop down when I click on it
why doesn't the drop down button work?
I used the bootstrap navbar found here :
Here is my code below:
Please ask if you need anything else from me
THanks in advance!!
DOCTYPE html>
<head>
<title>Unicity</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.css"/>
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link type="text/css" rel="stylesheet" href="style/style.css"/>
<script src="U:\Desktop\jihad\unicityv1\js\bootstrap.js"></script>
<script src="U:\Desktop\jihad\unicityv1\js\bootstrap.js"></script>
<script src="U:\Desktop\jihad\unicityv1\js\bootstrap.min.js"></script>
<script src="U:\Desktop\jihad\unicityv1\js\npm.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="#"><img src="U:\Desktop\jihad\unicityv1\images\logo1.png" width="110" class="logo"/>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>Buy Gold</li>
<li class="dropdown">
Sell Gold<span class="caret"></span>
<ul class="dropdown-menu">
<li>Runescape3</li>
<li>Oldschool Runecape</li>
<li>Darkscape</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<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>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Saving your money, we are cheap!</h3>
<p>At Unicity we save your money by...</p>
</div>
<div class="col-sm-4">
<h3>Saving your time, we are fast!</h3>
<p> At Unicity we save your time by...</p>
</div>
<div class="col-sm-4">
<h3>Protecting your information, we are secure!</h3>
<p> At Unicity we secure your information are make sure that...</p>
</div>
</div>
</div>
</body>
</html>
I tried with your code there seem's no problem with code,it seems it not finding the correct CSS and Javascript. Try this and let me know.
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="#"><img src="U:\Desktop\jihad\unicityv1\images\logo1.png" width="110" class="logo"/>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>Buy Gold</li>
<li class="dropdown">
Sell Gold<span class="caret"></span>
<ul class="dropdown-menu">
<li>Runescape3</li>
<li>Oldschool Runecape</li>
<li>Darkscape</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<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>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Saving your money, we are cheap!</h3>
<p>At Unicity we save your money by...</p>
</div>
<div class="col-sm-4">
<h3>Saving your time, we are fast!</h3>
<p> At Unicity we save your time by...</p>
</div>
<div class="col-sm-4">
<h3>Protecting your information, we are secure!</h3>
<p> At Unicity we secure your information are make sure that...</p>
</div>
</div>
</div>
Demo:https://jsfiddle.net/1rwdc9os/
add Jquery library file.
Use either bootstrap.css or bootstrap.min.css and bootstrap.min.js or bootstrap.js
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
Try in angular.... This is better than others...
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<p>This example shows how to fill a dropdown list using the ng-options directive.</p>
</body>
</html>

Categories