inline block not working Bootstrap - html

For some reason, I cannot get the elements in column 2 to align as inline-block items, either with the bootstrap HTML d-inline-block or with my own CSS inline-block applied. It doesn't seem to matter whether my stylesheet named MainPage.css has priority over bootstrap or not.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="MainPage.css">
<title>Hello, world!</title>
</head>
<body>
<!-- <h1>Hello, world!</h1> -->
<div class="container-fluid">
<div class="row vh">
<div class="col-md-2 pt-3">
<ul id="socialmedia">
<li><a class="pl-2" id="facebook" href="https://www.facebook.com/"><img src="facebook16.png"/></a></li>
<li><a class="pl-2" id="twitter" href="https://www.twitter.com/"><img src="twitter16.png"/></a></li>
<li><a class="pl-2" id="instagram" href="https://www.twitter.com/"><img src="instagram16.png"/></a></li>
<li><a class="pl-2" id="youtube" href="https://www.twitter.com/"><img src="youtube16.png"/></a></li>
<li><a class="pl-2" id="spotify" href="https://www.twitter.com/"><img src="spotify16.png"/></a></li>
</ul>
</div>
<div class="col-md-6 pt-4">
<ul id="leftbanner">
<li><a class="" id="News" href="https://www.google.com/">News</a></li>
<li><a class="pl-2" id="Photos" href="https://www.google.com/">Photos</a></li>
<li><a class="pl-2" id="Tour" href="https://www.google.com/">Tour</a></li>
<li><a class="pl-2" id="Games" href="https://www.google.com/">Games</a></li>
</ul>
<p id="centerpage">BlackBird | Blue Bird</p>
<ul id="rightbanner">
<li><a class="" id="News" href="https://www.google.com/">News</a></li>
<li><a class=" pl-2" id="Photos" href="https://www.google.com/">Photos</a></li>
<li><a class=" pl-2" id="Tour" href="https://www.google.com/">Tour</a></li>
<li><a class=" pl-2" id="Games" href="https://www.google.com/">Games</a></li>
</ul>
</div>
<div class="col-md-4">
</div>
</div>
</div>
<!-- Optional JavaScript color #4f4f52 -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
CSS
body {
background-attachment: fixed;
background-image: url(BG1.jpg);
background-position: center;
background-repeat: no-repeat;
/* background-size: 100% 100%; */
background-size: cover;
margin: 0%;
padding: 0%;
}
#socialmedia li {
list-style-type: none;
display: inline;
}
#leftbanner li {
list-style-type: none;
display: inline-block;
}
#rightbanner li {
list-style-type: none;
display: inline-block;
}
#centerpage{
display: inline-block;
}
.container-fluid{
padding:0;
margin:0;
}
.vh div{
height: 7vh;
background: #f9f9fa;
}


If you add the d-inline-block class to the li items, it works as expected. (see code snippet below).
However, you might rather want to use the Bootstrap 4 nav classes for this job because they were designed precisely for that and will make your life easier than working with d-inline-block classes in this case.
Reference: https://getbootstrap.com/docs/4.0/components/navs/
Here's a working code snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row vh">
<div class="col-md-2 pt-3">
<ul id ="socialmedia" class="list-unstyled">
<li><a class="pl-2" id ="facebook" href="https://www.facebook.com/"><img src="https://placehold.it/24"/></a></li>
<li><a class="pl-2" id ="twitter" href="https://www.twitter.com/"><img src="https://placehold.it/24"/></a></li>
<li><a class="pl-2" id ="instagram" href="https://www.twitter.com/"><img src="https://placehold.it/24"/></a></li>
<li><a class="pl-2" id ="youtube" href="https://www.twitter.com/"><img src="https://placehold.it/24"/></a></li>
<li><a class="pl-2" id ="spotify" href="https://www.twitter.com/"><img src="https://placehold.it/24"/></a></li>
</ul>
</div>
<div class="col-md-6 pt-4">
<ul id ="leftbanner" class="list-unstyled">
<li class="d-inline-block"><a class="" id ="News" href="https://www.google.com/">News</a></li>
<li class="d-inline-block"><a class="pl-2" id ="Photos" href="https://www.google.com/">Photos</a></li>
<li class="d-inline-block"><a class="pl-2" id ="Tour" href="https://www.google.com/">Tour</a></li>
<li class="d-inline-block"><a class="pl-2" id ="Games" href="https://www.google.com/">Games</a></li>
</ul>
<p id ="centerpage">BlackBird | Blue Bird</p>
<ul id ="rightbanner" class="list-unstyled">
<li class="d-inline-block"><a class="" id ="News" href="https://www.google.com/">News</a></li>
<li class="d-inline-block"><a class=" pl-2" id ="Photos" href="https://www.google.com/">Photos</a></li>
<li class="d-inline-block"><a class=" pl-2" id ="Tour" href="https://www.google.com/">Tour</a></li>
<li class="d-inline-block"><a class=" pl-2" id ="Games" href="https://www.google.com/">Games</a></li>
</ul>
</div>
<div class="col-md-4">
</div>
</div>
</div>

Related

icons on footer don't align

Trying to align my footer icons but I can't seem to center the first 2 images. The bootstrap icons center fine, but the first 2 images don't. I have tried doing things like align-items-center, justify-content-center, text-center, etc.
using bootstrap v5.3.0-alpha-1
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
</head>
<body>
<div class="container" style="color: black;">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<span class="mb-3 mb-md-0 text-muted">© 2022 Company, Inc</span>
</div>
<ul class="nav justify-content-center">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Team</li>
<li class="nav-item">Pricing</li>
</ul>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3">
<a class="text-muted" href="https://opensea.io/collection/ozdao-pass">
<img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/twitter_circle-512.png" class="opensea_icon" style="height: 16px; width: 16px;" />
</a>
</li>
<li class="ms-3">
<a class="text-muted" href="https://opensea.io/collection/ozdao">
<img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/twitter_circle-512.png" style="height: 16px; width: 16px;" />
</a>
</li>
<li class="ms-3">
<a class="text-muted" href="https://twitter.com/xxx">
<i class="bi bi-twitter"></i>
</a>
</li>
<li class="ms-3">
<a class="text-muted" href="https://t.me/xxx">
<i class="bi bi-telegram"></i>
</a>
</li>
</ul>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>

The vertical-align property on your images is different than the bootstrap icons:
If you inspect the bootstrap icon, you'll see there is:
vertical-align: -.125em;
Try to add the same vertical-align to your images.

HTML Materialize CSS Dropdown and SideNav not working in Angular

I am helping my friend to create a replica of scholarship portal for college project. I made the navbar using materialize css and gave the html and css file to my friend to integrate it with angular. Me and my friend both are absolute beginners at angular and the dropdowns & sidenav does not respond upon clicking. Saw many solutions on the internet but we are unable to solve it.
Putting my html code of the navbar below
body{
font-family: 'Noto Sans JP', sans-serif;
}
*{
margin: 0;
padding: 0;
}
.dropdown-content{
width: max-content !important;
height:auto !important;
}
.nav-wrapper{
background-color:white;
}
.material-icons{
color: #EBA63F;
}
#logo-nav{
color: #E40C2B;
width: 100%;
}
.li-nav{
color: #3CBCC3;
}
.li-nav:hover{
color:#1D1D2C;
}
#sidenav1{
color: #1D1D2C;
background-color: #F7F4E9;
}
#sidenav1:hover{
background-color:#EBA63F;
color: #1D1D2C;
}
#dropdown-css{
color: #1D1D2C;
}
#dropdown-css:hover{
background-color: #EBA63F;
}
#sidenav1>.material-icons{
color: #1D1D2C;
}
.sidenav{
background-color: #F7F4E9;
}
.logos{
margin-top: 20px;
background-color: #3CBCC3;
}
#media only screen and (max-width: 810px) {
div.nav-wrapper {
/* height: 15vh;*/
-webkit-box-shadow: 0 3px 5px -3px #000;
-moz-box-shadow: 0 3px 5px -3px #000;
box-shadow: 0 3px 5px -3px #000;
}
}
#media only screen and (max-width: 560px) {
#logo-nav{
font-size: medium;
}
}
.logo,.logo1{
height: 40px
}
<!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.0">
<!-- CSS only -->
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime&family=Noto+Sans&family=Noto+Sans+JP:wght#500&display=swap" rel="stylesheet">
<!--jquery-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<!--bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!--materialize css-->
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!--materialize css icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--font awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<!--bootstrap font awesome cdn-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--css-->
<link rel="stylesheet" href="navbar2.css"/>
<link rel="stylesheet" href="homepage.css"/>
<title>Navbar Page</title>
</head>
<body>
<header>
<!--navbar ends here-->
<!-- Dropdown Structure for navbar -->
<ul id="dropdown1" class="dropdown-content">
<li><a id="dropdown-css" href="#!">Student Login</a></li>
<li class="divider"></li>
<li><a id="dropdown-css" href="#!">Institute Login</a></li>
<li class="divider"></li>
<li><a id="dropdown-css" href="#!">Ministry Login</a></li>
<li class="divider"></li>
<li><a id="dropdown-css" href="#!">Nodal Officer Login</a></li>
</ul>
<!-- Dropdown Structure for navbar -->
<ul id="dropdown2" class="dropdown-content">
<li><a id="dropdown-css" href="#!">Student Register</a></li>
<li class="divider"></li>
<li><a id="dropdown-css" href="#!">Institute Register</a></li>
<li class="divider"></li>
<li><a id="dropdown-css" href="#!">Ministry Register</a></li>
<li class="divider"></li>
<li><a id="dropdown-css" href="#!">Nodal Officer Register</a></li>
</ul>
<!-- Dropdown Structure for sidenav bar -->
<ul id="dropdown3" class="dropdown-content">
<li><a id="sidenav1" href="#!">Student Login</a></li>
<li><a id="sidenav1" href="#!">Institute Login</a></li>
<li><a id="sidenav1" href="#!">Ministry Login</a></li>
<li><a id="sidenav1" href="#!">Nodal Officer Login</a></li>
</ul>
<!-- Dropdown Structure for sidenav bar -->
<ul id="dropdown4" class="dropdown-content">
<li><a id="sidenav1" href="#!">Student Register</a></li>
<li><a id="sidenav1" href="#!">Institute Register</a></li>
<li><a id="sidenav1" href="#!">Ministry Register</a></li>
<li><a id="sidenav1" href="#!">Nodal Officer Register</a></li>
</ul>
<!-- Navbar main code starts here -->
<nav>
<i class="material-icons" >menu</i>
<div class="nav-wrapper">
<ul id="nav-mobile" class="hide-on-med-and-down">
<li><a class="li-nav" href="#">Home</a></li>
<li>
<div class="center row">
<div class="col s12 " >
<div class="row" id="topbarsearch">
<div class="input-field col s6 s12">
<i class="material-icons prefix">search</i>
<input type="text" placeholder="Search..." id="autocomplete-input" class="autocomplete li-nav" >
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="right hide-on-small-only">
<!-- login and register navbar Dropdown Trigger -->
<li><a class="dropdown-trigger li-nav" href="#!" data-target="dropdown1">Login<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger li-nav" href="#!" data-target="dropdown2">Register<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="li-nav" href="#">About Us</a></li>
<li><a class="li-nav" href="#">Contact Us</a></li>
</ul>
</div>
<!--sidenav main code-->
<ul class="sidenav" id="mobile-demo">
<li><a id="sidenav1 show-on-large" href="#home">Home</a></li>
<li><a id="sidenav1" class="dropdown-trigger" href="#!" data-target="dropdown3">Login<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a id="sidenav1" class="dropdown-trigger" href="#!" data-target="dropdown4">Register<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a id="sidenav1" href="#aboutus">About Us</a></li>
<li><a id="sidenav1" href="#contactus">Contact Us</a></li>
</ul>
</nav>
<nav>
<div class="nav-wrapper">
<a id="logo-nav" href="#!" class="brand-logo center">National Scholarship Portal</a>
</div>
</nav>
</header>
<!--navbar ends here-->
<script>
$(document).ready(function(){
$('.dropdown-trigger').dropdown({inDuration: 300, outDuration: 100, coverTrigger: false, alignment: 'center',});
$('.sidenav').sidenav();
//$('.button-collapse').sideNav();
$('.parallax').parallax();
});
</script>
</body>
</html>
It would mean everything to me if anyone can give me code for angular
I only included snippet of navbar above
This is my entire page that I made: https://drive.google.com/drive/folders/1QSifk0BneW3i_OKIU0RYcMRFusZ78q-k?usp=sharing
Please Please help me run this code in Angular

Creating a horizontal navbar with bootstrap

I am attempting to make a bootstrap navbar that spans horizontally across the screen. However, when I attempt to do so, the navbar links stack vertically as I will show.
Here is the HTML / CSS I have implemented:
body{
padding-top: 90px;
background-color: #dbdbdb;
}
#navMain{
background-color: #db8606;
padding-left: 20px;
padding-right: 20px;
}
#navbar-brand-image{
height: 70px;
}
.nav-link{
font-size: 165%;
font-family: 'Sriracha', cursive;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght#1,500&family=Parisienne&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sriracha&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default fixed-top" id="navMain">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" id="navbar-brand-title" href="index.html"><img src="content/logo.png" id="navbar-brand-image" alt=""></a>
</div>
<ul class="nav navbar-nav">
<li>
<a class="nav-link" href="#">Home</a>
</li>
<li>
<a class="nav-link" href="about.html">About</a>
</li>
<li>
<a class="nav-link" href="about.html">About</a>
</li>
<li>
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
The result that I achieve looks like this:
Instead, I want the links to span horizontally.
I tried using the W3schools tutorial at this link and it doesn't even recreate the same as what's on the site.
Thanks for your help in advance!

Navbars are really not that special, except they are fluid (100% wide) and hidden by default when printing. If you place the navbar inside a column grid it will align responsively to its parent; it also works with dropdowns:
<div class="row">
<div class="col-9">main content</div>
<div class="col-3">
<nav>
<div class="navbar-header">
<a class="navbar-brand" id="navbar-brand" href="#">#</a>
</div>
<ul class="nav navbar-nav">
<li><a class="nav-link" href="#">Home</a></li>
<li><a class="nav-link" href="about.html">About</a></li>
<li>
<a class="dropdown-toggle" aria-expanded="false" data-toggle="collapse" href="#dropdown">dropdown</a>
<ul class="collapse" id="dropdown">
<li>item 1</li>
<li>item 2</li>
</ul>
</li>
<li><a class="nav-link" href="about.html">About</a></li>
</ul>
</nav>
</div>
</div>
http://jsfiddle.net/e2ur4wd0/

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.