How to fix bootstrap dropdown menu problem - html

I am practicing using Twitter Bootstrap. I've repeatedly tried to implement a dropdown menu, but I can't seem to make it work. Can anyone please help me identify why the HTML shown below is not resulting in a working Bootstrap dropdown menu?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container" style="padding: 20px;">
<div class="row">
<div class="col-lg-12" style="height: 50px; padding: 0px; margin: 0px;">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Academic
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>academic 1</li>
<li>academic 1</li>
<li>academic 1</li>
</ul>
</li>
<li>Result</li>
<li>Notice Board</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-2" style="height: 800px; border: 1px solid;">
</div>
<div class="col-lg-7" style="height: 800px; border: 1px solid;"></div>
<div class="col-lg-3" style="height: 800px; border: 1px solid;"></div>
</div>
<div class="row">
<div class="col-lg-12" style="height: 150px; border: 1px solid;">
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>


You are missing jquery CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
That may be the problem, unless it works fine.
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 20px;">
<div class="row">
<div class="col-lg-12" style="height: 50px; padding: 0px; margin: 0px;">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Academic
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>academic 1</li>
<li>academic 1</li>
<li>academic 1</li>
</ul>
</li>
<li>Result</li>
<li>Notice Board</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-2" style="height: 800px; border: 1px solid;">
</div>
<div class="col-lg-7" style="height: 800px; border: 1px solid;"></div>
<div class="col-lg-3" style="height: 800px; border: 1px solid;"></div>
</div>
<div class="row">
<div class="col-lg-12" style="height: 150px; border: 1px solid;">
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
</b>


You should mention instead of
Use the following. Hope it will work now.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

Related

Struggling to position Boostrap with my own CSS

When trying to position my search bar at equal y level to the "Art Store" text, it does not do this.
<div id="logoRow" >
<h1>Art Store</h1>
<form class="searchBar">
<div class="input-group locationSearch">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
That is my text for the art store and then the search bar. My search bar looks like this with none of my own CSS:
When I add my own CSS, it looks like this
.searchBar {
width: 250px;
padding: 10px;
margin-right: 50px;
}
I want to position my search bar on the right side positioned at an equal y level to the Art Store text. When I use float: right, it positions the search bar down into the bottom navbar...?
This is not what I want to happen. I'm unsure why this is happening as it happens even when I set the position to relative. Any help would be greatly appreciated. Below is a little bit more code if that helps. (includes the bottom navbar)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter5</title>
<!-- Custom styles for this template -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="assign3.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow" >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Welcome to Art Store, Login or Create a new Account</a>
</div>
<ul class="nav navbar-nav moveRight">
<li>My Account</li>
<li>Wish List</li>
<li>Shopping Cart</li>
<li>Checkout</li>
</ul>
</div>
</nav>
</div>
<!-- end topHeaderRow -->
<div id="logoRow" >
<h1>Art Store</h1>
<form class="searchBar">
<div class="input-group locationSearch">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<!-- end logoRow -->
<div id="mainNavigationRow" >
<nav class="navbar navbar-default">
<ul class="nav navbar-nav mynavbar">
<li class="active">Home</li>
<li>About Us</li>
<li>Art Works</li>
<li>Artists</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Specials
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Special 1</li>
<li>Special 2</li>
</ul>
</li>
</ul>
</div>
</nav>
</nav>
</div>

I'am added a code into your case
#logoRow {
display:flex;
width:100%
}
#logoRow h1 {
margin-top:0;
}
#logoRow form.searchBar {
width:40%
display:inline-block;
margin-left:auto;
}
I'm used margin-top:0px for remove margin from bootstrap into #logoRow
So will get output like this
#logoRow {
display:flex;
width:100%
}
#logoRow h1 {
margin-top:0;
}
#logoRow form.searchBar {
width:40%;
display:inline-block;
margin-left:auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter5</title>
<!-- Custom styles for this template -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="assign3.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Welcome to Art Store, Login or Create a new Account</a>
</div>
<ul class="nav navbar-nav moveRight">
<li>My Account</li>
<li>Wish List</li>
<li>Shopping Cart</li>
<li>Checkout</li>
</ul>
</div>
</nav>
</div>
<!-- end topHeaderRow -->
<div id="logoRow">
<h1>Art Store</h1>
<form class="searchBar">
<div class="input-group locationSearch">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<!-- end logoRow -->
<div id="mainNavigationRow">
<nav class="navbar navbar-default">
<ul class="nav navbar-nav mynavbar">
<li class="active">Home</li>
<li>About Us</li>
<li>Art Works</li>
<li>Artists</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Specials
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Special 1</li>
<li>Special 2</li>
</ul>
</li>
</ul>
</div>
</nav>
</nav>
</div>

This should work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter5</title>
<!-- Custom styles for this template -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="assign3.css" rel="stylesheet">
<style>
.searchBar {
width: 250px;
padding: 10px;
margin-left: auto;
}
</style>
</head>
<body>
<header>
<div id="topHeaderRow" >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Welcome to Art Store, Login or Create a new Account</a>
</div>
<ul class="nav navbar-nav moveRight">
<li>My Account</li>
<li>Wish List</li>
<li>Shopping Cart</li>
<li>Checkout</li>
</ul>
</div>
</nav>
</div>
<!-- end topHeaderRow -->
<div id="logoRow" >
<h1>Art Store</h1>
</div>
<!-- end logoRow -->
<div id="mainNavigationRow" >
<nav class="navbar navbar-default">
<ul class="nav navbar-nav mynavbar">
<li class="active">Home</li>
<li>About Us</li>
<li>Art Works</li>
<li>Artists</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Specials
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Special 1</li>
<li>Special 2</li>
</ul>
</li>
</ul>
<form class="searchBar">
<div class="input-group locationSearch">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</nav>
</div>
</header>
</body>
</html>

Hey if i understand correctly you can use display flex to get your desired results. See the below css for how I solved it. click here for a screenshot
#logoRow{
display: flex;
align-items: center;
}
#logoRow h1{
margin: 2rem;
}

This can help:
.searchBar {
position:absolute;
float:right;
width: 250px;
padding: 10px;
margin-right: 50px;
}

Container-Fluid Not Using Full Width of The Page

I am trying to create a page with a collapsible sidebar on the left and a content are that occupies the rest of the page. In my content area I want a navbar up on top and the rest of the content below.
Currently, I am using a container-fluid class to make sure the navbar resizes. When I have a regular paragraph encapsulated in <p> tag the navbar and the paragraph spans the full width of the page. However, the moment I use row's and col's the content seems to take up only have the page and does not go to the edges.
Here is my html code:
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn navbar-btn">
<i class="glyphicon glyphicon-menu-hamburger"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>username</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-3">
<!-- I have a few divs here -->
</div>
<div class="col-md-9">
<!-- I have a fre more divs here -->
</div>
</div><!-- row -->
</div>
I am currently using Bootstrap 3 (3.3.7) and was following along with this tutorial. I know there are a few other questions on Stack Overflow, but none of the solutions there seems to do anything to solve my problem.
Thanks for any help.

I think you expecting this. if it's not your expectation please add fiddler snippet here, I will update code.
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
<!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">
<!-- Latest compiled and minified CSS -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://bootstrapious.com/tutorial/sidebar/style2.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>
About
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>Download source</li>
<li>Back to article</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content" class="">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Page</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-3">
<div style="background-color: #324D5C; padding: 25px; border-radius: 5px;">
<p><b style="color: #fff;">Upcomming</b></p>
<h1 style="color: #46B29D; text-align: right;">50</h1>
</div>
<br>
<div style="background-color: #46B29D; padding: 25px; border-radius: 5px;">
<p><b style="color: #fff;">Total Created</b></p>
<h1 style="color: #F0CA4D; text-align: right;">120</h1>
</div>
<br>
<div style="background-color: #F0CA4D; padding: 25px; border-radius: 5px;">
<p><b style="color: #E37B40;">Avgerage Value</b></p>
<h1 style="color: #324D5C; text-align: right;">$400</h1>
</div>
<br>
</div> <!-- col-md-3 -->
<div class="col-md-9">
<div style="background-color: #46B29D; padding: 25px; border-radius: 5px;">
<p><b style="color: #fff;">Upcomming</b></p>
<h1 style="color: #46B29D; text-align: right;">50</h1>
</div>
<br>
<div style="background-color: #46B29D; padding: 25px; border-radius: 5px; ">
<p><b style="color: #fff;">Total Created</b></p>
<h1 style="color: #F0CA4D; text-align: right;">120</h1>
</div>
<br>
<div style="background-color: #F0CA4D; padding: 25px; border-radius: 5px;">
<p><b style="color: #E37B40;">Avgerage Value</b></p>
<h1 style="color: #324D5C; text-align: right;">$400</h1>
</div>
<br>
</div> <!-- col-md-9 -->
</div><!-- row -->
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
</body>
</html>

Bootstrap: Trouble With Responsive Centered Columns

I'm having trouble aligning <h2> in a straight line on a Bootstrap page (centered column) as shown in the snippet below.
h1 {
text-align: center;
}
.navbar-default {
background-color: #F5F5F5;
border-color: #E7E7E7;
opacity: 100%;
}
.row-footer{
background-color: #AfAfAf;
margin:0px auto;
padding: 20px 0px 20px 0px;
}
.icons {
display: inline;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
<!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">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Responsive Page</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-social.css">
</head>
<body>
<h1>ALOK</h1>
<div class="container">
<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="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</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>
</div>
<div class="container">
<div class="row row-centered">
<div class="col-sm-4 col-centered">
<h2>Favorite Foods</h2>
<ul>
<li>Apples</li>
<li>Pizza</li>
<li>Crab</li>
<li>Chocolate Cake</li>
</ul>
</div>
<div class="col-sm-4 col-centered">
<h2>Achievements</h2>
</div>
<div class="col-sm-4 col-centered">
<h2>More About Me</h2>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row row-footer">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="icons" style="padding: 40px 10px;">
<li><i class="fa fa-stack-overflow"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align="center">© Copyright 2016 Alok's Webpage!</p>
</div>
</div>
</div>
</footer>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>
If I add the <ul> after <h2> the remaining <h2> gets misaligned. I have shown the picture here How do I align them?

It is done and worked perfectly check it. Hope this works for you.
h1 {
text-align: center;
}
.navbar-default {
background-color: #F5F5F5;
border-color: #E7E7E7;
opacity: 100%;
}
.row-footer {
background-color: #AfAfAf;
margin: 0px auto;
padding: 20px 0px 20px 0px;
}
.icons {
display: inline;
}
/* centered columns styles */
.row-centered {
text-align: center;
}
.col-centered {
display: inline-block;
float: none;
/* reset the text-align */
text-align: left;
/* inline-block space fix */
margin-right: -4px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<h1>ALOK</h1>
<div class="container">
<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="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</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>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4col-centered">
<h2>Favorite Foods</h2>
<ul>
<li>Apples</li>
<li>Pizza</li>
<li>Crab</li>
<li>Chocolate Cake</li>
</ul>
</div>
<div class="col-sm-4 col-md-4col-centered">
<h2>Achievements</h2>
</div>
<div class="col-sm-4 col-md-4col-centered">
<h2>More About Me</h2>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row row-footer">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home
</li>
<li>About
</li>
<li>Menu
</li>
<li>Contact
</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="icons" style="padding: 40px 10px;">
<li><i class="fa fa-stack-overflow"></i>
</li>
<li><i class="fa fa-twitter"></i>
</li>
<li><i class="fa fa-facebook"></i>
</li>
<li><i class="fa fa-google-plus"></i>
</li>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align="center">© Copyright 2016 Alok's Webpage!</p>
</div>
</div>
</div>
</footer>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>

Since you tried to add three columns in a row for small screen, it was break.
Add proper classes for columns. col-xs-12 col-lg-4 col-centered
h1 {
text-align: center;
}
.navbar-default {
background-color: #F5F5F5;
border-color: #E7E7E7;
opacity: 100%;
}
.row-footer{
background-color: #AfAfAf;
margin:0px auto;
padding: 20px 0px 20px 0px;
}
.icons {
display: inline;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none !important;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
<!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">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Responsive Page</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-social.css">
</head>
<body>
<h1>ALOK</h1>
<div class="container">
<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="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</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>
</div>
<div class="container">
<div class="row row-centered">
<div class="col-xs-12 col-lg-4 col-centered">
<h2>Favorite Foods</h2>
<ul>
<li>Apples</li>
<li>Pizza</li>
<li>Crab</li>
<li>Chocolate Cake</li>
</ul>
</div>
<div class="col-xs-12 col-lg-4 col-centered">
<h2>Achievements</h2>
</div>
<div class="col-xs-12 col-lg-4 col-centered">
<h2>More About Me</h2>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row row-footer">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="icons" style="padding: 40px 10px;">
<li><i class="fa fa-stack-overflow"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align="center">© Copyright 2016 Alok's Webpage!</p>
</div>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

use a min-height to your h2 div's min-height:200px;
<!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">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Responsive Page</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-social.css">
<style type="text/css">
h1 {
text-align: center;
}
.navbar-default {
background-color: #F5F5F5;
border-color: #E7E7E7;
opacity: 100%;
}
.row-footer{
background-color: #AfAfAf;
margin:0px auto;
padding: 20px 0px 20px 0px;
}
.icons {
display: inline;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
</style>
</head>
<body>
<h1>ALOK</h1>
<div class="container">
<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="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</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>
</div>
<div class="container">
<div class="row row-centered">
<div class="col-sm-4" style="min-height:200px;">
<h2>Favorite Foods</h2>
<ul>
<li>Apples</li>
<li>Pizza</li>
<li>Crab</li>
<li>Chocolate Cake</li>
</ul>
</div>
<div class="col-sm-4" style="min-height:200px;">
<h2>Achievements</h2>
</div>
<div class="col-sm-4" style="min-height:200px;">
<h2>More About Me</h2>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row row-footer">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="icons" style="padding: 40px 10px;">
<li><i class="fa fa-stack-overflow"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align="center">© Copyright 2016 Alok's Webpage!</p>
</div>
</div>
</div>
</footer>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>

Second level vertical menu disapperas while hovering

I have multilevel vertical menu,when i try to go to second level ,second level menu disappears.(some old versions of browsers it works fine )
and the height of second level menu is also not equal to first level.i want to something like that
I have pasted my exisiting code on
http://codepen.io/anon/pen/Mwwdqd
though code is not working on codepen,you can copy the html,css in separate files.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<html lang="en">
<body>
<div id="wrapper">
<div class="main-content">
<div class="topnav">
<div class="account">
<ul><li>Nathan Smith</li>
</ul>
</div>
<div class="accountname">
<ul><li>My Account</li></ul>
</div>
<div class="logout">
<ul><li>Log Out</li></ul>
</div>
<div class="addtofav"><ul><li>Add to Favourties</li></ul></span></div>
<div class="name"><ul><li>Voyager</li></ul></span></div>
<div>zxczxc czx</div>
</div>
</div>
<div class="sidebar">
<div class="left">
<div class="row col-xs-6 col-sm-3 col-md-2 logo">
<div class="imageinbottomtextontop">
<div class="titletextimage_image">
<a href="/content/count/en/default.html" target="_top">
<img title="COUNT" style="width:px; height:px;" src="images/logo.png" alt="COUNT">
</a>
</div>
</div>
</div>
</div>
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>
<div id="left-menu">
<div>
<ul class="nav nav-pills nav-stacked mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">Client Advice</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a tabindex="-1" href="#">Pre-advice</a></li>
<li class="dropdown-submenu">Strategy & Technical</li>
<li class="dropdown-submenu">Research</li>
<li class="dropdown-submenu active">
APL & Products
<ul class="dropdown-menu parent last-level">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">
Approved Product List
<span aria-hidden="true" class="glyphicon glyphicon-plus menu-align"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus menu-align" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 15px;">Platforms</li>
<li style="padding: 10px 15px;">Managed Funds</li>
<li style="padding: 10px 15px;">Wealth Protection</li>
<li style="padding: 10px 15px;">Listed Securities</li>
<li style="padding: 10px 15px;">Wealth Protection</li>
<li style="padding: 10px 15px;">Listed Securities</li>
<li style="padding: 10px 15px;">Listed Securities</li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">Model Portfolios</li>
<li style=" border-bottom: 1px solid #ccc;">Non-approved Products</li>
</ul>
</li>
<li class="dropdown-submenu">Implementation</li>
<li class="dropdown-submenu">Review</li>
<li class="dropdown-submenu">Execution Only</li>
</ul>
</li>
<li class="dropdown-submenu menu-align"><a href="#" >Personal Development</a></li>
<li class="dropdown-submenu menu-align "><a href="#" >Practice</a></li>
<li class="dropdown-submenu menu-align "><a href="#" >News</a></li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
if (event.preventDefault) event.preventDefault()
else event.returnValue = false;
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
</script>
</body>
</html>

Remove margin-left: 25px; from .dropdown-submenu > .dropdown-menu
It disappears because when you try to hover into the second menu you run into that margin so you leave the initial element that maintains the hover state. Use padding instead.
Inspect the element with developer tools (right-click > Inspect) to better visually see the area around the element.

Link error in bootstrap navbar

I'm trying to teach myself bootstrap but I've run into a bizarre problem: my navbar seems to have a link to something that's not there.
Above the navbar I have a list of social media contacts but the last list item (instagram) seems to be creating a hyperlink in the nav bar. Now, the social media list and nav bar list are in completely separate containers, the instagram <a> tag is closed and the <li> and <ul> tags are closed.
When I look at in the browsers developer tools it's showing additional instagram links that just aren't in my HTML, so I'm at a loss. I must be missing something. Website is coledavidson.ca/web (it's still in development, don't judge).
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cole Davidson</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.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!--HEADER SECTION-->
<div id="header">
<div class="row">
<span align="center"></center><div class="col-sm-9 header-img"><div class="header-img-box"><img src="images/Cole%20Davidson%20-%20White.png"></div></div></span>
<div class="col-sm-3 social-media">
<ul>
<li><img src="images/sm-icons/email.png"</li>
<li><img src="images/sm-icons/twitter.png"</li>
<li><img src="images/sm-icons/fb.png"</li>
<li><img src="images/sm-icons/linkedin.png"</li>
<li><img src="images/sm-icons/instagram.png"</li>
</ul>
</div>
</div>
</div>
<!--NAV BAR SECTION-->
<div class="row">
<nav class="navbar navbar-default">
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown" href="index.html">About
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Education</li>
<li>Employment</li>
<li>Volunteerism</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Services
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Graphic Design</li>
<li>Web Design</li>
<li>NationBuilder</li>
<li>Digital Strategy</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Portfolio
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Graphic Design</li>
<li>Web Design</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<!--PAGE CONTENT SECTION-->
<div class="row">
<div class="col-sm-12"><h1>Page Title goes here.</h1></div>
</div>
<div class="row">
<div class="col-sm-12"><p>Page content goes here.</p></div>
</div>
<!--FOOTER SECTION-->
<div class="row"><div class="col-sm-12"><p>Footer content goes here.</p></div>
</div>
</div>
</body>
</html>
CSS:
/*This is the stylesheet for coledavidson.ca. This website also uses the bootstrap stylesheets.*/
/*Author: Cole Davidson*/
body {
background-image: url(images/about-bg.jpg);
background-repeat:no-repeat;
background-size: auto;
background-position:center;
height: 100%;
}
.header-img img {
width: 75%;
height: auto;
}
.social-media ul {
list-style: none;
}
.social-media img {
width:30px;
height:auto;
}
Thanks in advance!

here you missed a '>' tag in <img src="">