Bootstrap appears not to be working with my columns - html

I am currently working on my first website and I'm attempting to create a product page using bootstrap. However, it seems that the columns and rows are not working with bootstrap. Alongside with the columns not working other things aren't working properly such as the shopping cart icon. What am I missing? here is my code.
HTML:
<head>
<meta charest="UTF-8">
<meta name="veiwport" content="width=device-width, initial-scaled=1.0">
<meta http-equiv="X-UA-Compatible" content="id=edge">
<title>Store</title>
<link rel="stylesheet" href="css/stylesheet.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./css/lightbox.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="./js/lightbox-plus-jquery.min.js"></script>
</head>
<body>
<header id="store-header">
<div class="main">
<div class="logo-text">
<h1 class="text-logo">Your Local Artist</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Store</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</header>
<div class="page-wrapper">
<div class="logo-top">
<h1 class="logo-text">
Your Local Artist
</h1>
<h2>
|Store
</h2>
</div>
<div class="store-container">
<h2>New Arrivals</h2>
<div class="row">
<div class="col-md-3">
<div class="product-top">
<img src="./products/resize2.jpg">
<div class="overlay">
<button type="button" class="btn btn-secondary" title="Quick SHOP"><i class="fa fa-eye"></i></button>
<button type="button" class="btn btn-secondary" title="Add to Wishlist"><i class="fa fa-heart-o"></i></button>
<button type="button" class="btn btn-secondary" title="Add to Cart"><i class="fa fa-shopping-cart"></i></button>
</div>
<div class="product-bottom text-center">
<i class="fa fas-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-half-o"></i>
<h3>Art painting</h3>
<h5>€100.00</h5>
</div>
</div>
</div>
<div class="product-top">
<img src="./products/resize2.jpg">
<div class="overlay">
<button type="button" class="btn btn-secondary" title="Quick SHOP"><i class="fa fa-eye"></i></button>
<button type="button" class="btn btn-secondary" title="Add to Wishlist"><i class="fa fa-heart-o"></i></button>
<button type="button" class="btn btn-secondary" title="Add to Cart"><i class="fa fa-shopping-cart"></i></button>
</div>
<div class="product-bottom text-center">
<i class="fa fas-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-half-o"></i>
<h3>Art painting</h3>
<h5>€100.00</h5>
</div>
</div>
</div>
<div class="product-top">
<img src="./products/resize2.jpg">
<div class="overlay">
<button type="button" class="btn btn-secondary" title="Quick SHOP"><i class="fa fa-eye"></i></button>
<button type="button" class="btn btn-secondary" title="Add to Wishlist"><i class="fa fa-heart-o"></i></button>
<button type="button" class="btn btn-secondary" title="Add to Cart"><i class="fa fa-shopping-cart"></i></button>
</div>
<div class="product-bottom text-center">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-half-o"></i>
<h3>Art painting</h3>
<h5>€100.00</h5>
</div>
</div>
</div>
</div>
</div>


Replace your Bootstrap and font awesome CDN with this(I replaced and it started working)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

Related

Buttons do not open link unless I click the web icon

The buttons I created to link to my social media are not working as expected. When I click the button it doesn't open the link unless I click the link's icon.
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<section id="contact" class="py-5 text-center">
<div class="container text-center ml-auto">
<div class="row">
<div class="col">
<div class="info-header md-5 text-light ">
<h1 class="text-primary pb-3">CONTACT US</h1>
<button class="btn btn-outline-success mr-3">
<a style="color: green;" target="_blank" href="https://wa.me/2349080237740"><i class="fa fa-whatsapp fa-1x"></i></a>
</button>
<button class="btn btn-outline-primary mr-3">
<a class="text-primary" target="_blank" href="https://t.me/dopewilly"><i class="fa fa-telegram fa-1x"></i></a>
</button>
<button class="btn btn-outline-danger mr-3">
<a class="text-danger" target="_blank" href="#"><i class="fa fa-instagram fa-1x"></i></a>
</button>
<button class="btn btn-outline-info">
<a target="_blank" href="#"><i class="fa fa-twitter fa-1x"></i></a>
</button>
</div>
</div>
</div>
</div>
</section>

Instead of having the <a> inside the <button> which is invalid and creates the issue you are encountering, move your <button> classes to the <a> and remove the <button> tags after, like this:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<section id="contact" class="py-5 text-center">
<div class="container text-center ml-auto">
<div class="row">
<div class="col">
<div class="info-header md-5 text-light ">
<h1 class="text-primary pb-3">CONTACT US</h1>
<a class="btn btn-outline-success mr-3" style="color: green;" target="_blank" href="https://wa.me/2349080237740"><i class="fa fa-whatsapp fa-1x"></i></a>
<a class="btn btn-outline-primary mr-3 text-primary" target="_blank" href="https://t.me/dopewilly"><i class="fa fa-telegram fa-1x"></i></a>
<a class="btn btn-outline-danger mr-3 text-danger" target="_blank" href="#"><i class="fa fa-instagram fa-1x"></i></a>
<a class="btn btn-outline-info" target="_blank" href="#"><i class="fa fa-twitter fa-1x"></i></a>
</div>
</div>
</div>
</div>
</section>

Bootstrap navbar some item centered and others to the right

I'm building my NavBar in ReactJS using bootstrap 4.
I would like to take some element at the center of the navbar and others on the right.
In this particular case I would like to have the logout icon on the right.
This is the current situation:
This is the current code:
render () {
return (
<nav className="navbar navbar-dark bg-primary fixed-top">
<Link className="navbar-brand" to="/">
App
</Link>
{
!localStorage.getItem('token') &&
<button className="btn btn-dark" onClick={this.loginClicked}>Login</button>
}
{
localStorage.getItem('token') &&
<div className="mx-auto order-0">
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-file-invoice-dollar fa-lg"></i>
<sup className="notification-badge"><span class="badge badge-success">1</span></sup>
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-envelope fa-lg"></i>
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-cogs fa-lg"></i>
</button>
<button className="btn btn-outline-danger btn-lg" onClick={this.logoutClicked}>
<i class="fas fa-sign-out-alt fa-lg"></i>
</button>
</div>
}
</nav>
);
}
And this is what I would like to have:

Here's what you will have to do:
You don't even have to over-write the flex properties. The bootstrap nav comes with display flex & space-around property by default.
Group your html content as shown -
A. navbar-brand
B. a parent div that contains the elements you want in the center
C. your logout button
Remove the margin auto class(mx-auto order-0) classes from your code. This is the culprit.
Change your react code to:
render() {
return (
<nav className="navbar navbar-dark bg-primary fixed-top">
<Link className="navbar-brand" to="/">
App
</Link>
{!localStorage.getItem("token") && (
<button className="btn btn-dark" onClick={this.loginClicked}>
Login
</button>
)}
{localStorage.getItem("token") && (
<React.Fragment>
<div className="first-part">
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-file-invoice-dollar fa-lg" />
<sup className="notification-badge">
<span class="badge badge-success">1</span>
</sup>
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-envelope fa-lg" />
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-cogs fa-lg" />
</button>
</div>
<div className="second-part">
<button
className="btn btn-outline-danger btn-lg"
onClick={this.logoutClicked}
>
<i class="fas fa-sign-out-alt fa-lg" />
</button>
</div>
</React.Fragment>
)}
</nav>
);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<nav class="flex-container navbar navbar-dark bg-primary fixed-top">
<a class="navbar-brand" to="/"> App
</a>
<div class="first-part">
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-file-invoice-dollar fa-lg"></i>
<sup class="notification-badge"><span class="badge badge-success">1</span></sup>
</button>
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-envelope fa-lg"></i>
</button>
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-cogs fa-lg"></i>
</button>
</div>
<div class="second-part">
<button class="btn btn-outline-danger btn-lg">
<i class="fas fa-sign-out-alt fa-lg"></i>
</button>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

You can use display: flex, and align-content: space-between like so:
.wrapper{
width: 100%;
}
.mid_to_right{
padding-left: 50%;
background-color: red;
display: flex;
flex-flow: row nowrap;
flex-basis: 100%;
justify-content: space-between;
}
.left{
display: flex;
flex-flow: row nowrap;
}
.icon{
width: 50px;
height: 50px;
background-color: yellow;
}
.left .icon{
background-color: green;
}
<div class="wrapper">
<div class="mid_to_right">
<div class="left">
<div class="icon">
</div>
<div class="icon">
</div>
<div class="icon">
</div>
</div>
<div class="right">
<div class="icon">
</div>
</div>
</div>
</div>

As explained here and here you have to consider the width of adjacent flexbox items to ensure the center content is actually centered in the viewport.
The simplest method using Bootstrap 4 would be to use the w-100 utility classes to ensure the 3 separate flexbox children always fill the width equally, and then align as desired...
<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand">
<a class="navbar-brand w-100" to="/">
App
</a>
<div class="d-flex">
<div class="text-nowrap">
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-star fa-lg"></i>
</button>
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-envelope fa-lg"></i>
<sup><span class="badge badge-success">1</span></sup>
</button>
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-cogs fa-lg"></i>
</button>
</div>
</div>
<div class="w-100 text-right">
<button class="btn btn-outline-danger btn-lg" onclick="{this.logoutClicked}">
<i class="fas fa-sign-out-alt fa-lg"></i>
</button>
</div>
</nav>
https://www.codeply.com/go/SRy82V3M76

Floats not working with Bootstrap?

I am trying two float two elements with inside a Bootstrap navigation, but it won't work.
.cls1 {
float: left !important;
}
.cls2 {
float: right !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-static-top hidden-sm hidden-md hidden-lg">
<div class="container">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle cls1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="cls2">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-pinterest-p" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-heart" aria-hidden="true"></i>
<i class="fa fa-tumblr" aria-hidden="true"></i>
<i class="fa fa-soundcloud" aria-hidden="true"></i>
<i class="fa fa-vimeo-square" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-rss" aria-hidden="true"></i>
</div>
</div>
<div id="navbarCollapse5" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>NATURE</li>
<li>TRAVEL</li>
<li>CONTACT</li>
<li>ABOUT ME</li>
<li>MUSIC</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.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>
Am I missing something? Is there a conflict that I am not seeing?

there is class .hidden-lg it have css style
#media (max-width: 1199px) and (min-width: 992px)
.hidden-md {
display: none!important;
}
#media (min-width: 1200px)
.hidden-lg {
display: none!important;
}
#media (max-width: 991px) and (min-width: 768px)
.hidden-sm {
display: none!important;
}
Because of these bootstrap classes, the whole element should be hide from DOM. Below 768px of window size it should work.
Below edit the code and try it
.cls1 {
float: left !important;
}
.cls2 {
float: right !important;
}
#media (max-width: 768px) {
.cls3 {
float: right !important;
}
.cls2 {
display:none;
}
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle cls1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="cls3 hidden-sm hidden-md hidden-lg">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-pinterest-p" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-heart" aria-hidden="true"></i>
<i class="fa fa-tumblr" aria-hidden="true"></i>
<i class="fa fa-soundcloud" aria-hidden="true"></i>
<i class="fa fa-vimeo-square" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-rss" aria-hidden="true"></i>
</div>
</div>
<div id="navbarCollapse5" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>NATURE</li>
<li>TRAVEL</li>
<li>CONTACT</li>
<li>ABOUT ME</li>
<li>MUSIC</li>
</ul>
</div>
<div class="cls2">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-pinterest-p" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-heart" aria-hidden="true"></i>
<i class="fa fa-tumblr" aria-hidden="true"></i>
<i class="fa fa-soundcloud" aria-hidden="true"></i>
<i class="fa fa-vimeo-square" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-rss" aria-hidden="true"></i>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.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>
</body>
</html>

font awesome same size links

I am trying to create same size button (hyperlink) with FontAwesome.
HTML as below:
<a class="btn btn-lg btn-info" href="#">
Button 1 Info<br /> sub<br />
<i class="fa fa-flag fa-2x pull-right"></i>
</a>
<a class="btn btn-lg btn-info" href="#">
Button 2<br /><br />
<i class="fa fa-cloud-upload fa-2x pull-right"></i>
</a>
<a class="btn btn-lg btn-info" href="#">
Button<br /><br />
<i class="fa fa-cloud-download fa-2x pull-right"></i>
</a>
See Image as below.
All button should be of same size
Is there any inbuilt css class in font awesome?

Sb admin 2 menu doesn't collapse when I edit some content

I'm working to edit some content for this Bootstrap theme: http://startbootstrap.com/template-overviews/sb-admin-2/
When I delete some content from the index.html file the left side bar navigation menu has been expanded and didn't collapse again.
Here is the edited index.html code:
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Bootstrap Admin Theme</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Timeline CSS -->
<link href="css/plugins/timeline.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="css/plugins/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
<a class="navbar-brand" href="index.html">SB Admin v2.0</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw"></i> New Comment
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
<span class="pull-right text-muted small">12 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-envelope fa-fw"></i> Message Sent
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-tasks fa-fw"></i> New Task
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-upload fa-fw"></i> Server Rebooted
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-alerts -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-user fa-fw"></i> User Profile
</li>
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<a class="active" href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Flot Charts
</li>
<li>
Morris.js Charts
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-table fa-fw"></i> Tables
</li>
<li>
<i class="fa fa-edit fa-fw"></i> Forms
</li>
<li>
<i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Panels and Wells
</li>
<li>
Buttons
</li>
<li>
Notifications
</li>
<li>
Typography
</li>
<li>
Grid
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Dashboard</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-comments fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">26</div>
<div>New Comments!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-green">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-tasks fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">12</div>
<div>New Tasks!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-shopping-cart fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">124</div>
<div>New Orders!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-red">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-support fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">13</div>
<div>Support Tickets!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="js/plugins/metisMenu/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="js/plugins/morris/raphael.min.js"></script>
<script src="js/plugins/morris/morris.min.js"></script>
<script src="js/plugins/morris/morris-data.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/sb-admin-2.js"></script>
</body>
</html>

You have to remove <script src="js/plugins/morris/morris-data.js"></script> from the bottom of your index.html.
This file contains sample data from the demo preview. Since you removed these graph div containers, the script throws an error as it can't find the container. This error stops the script execution and therefore the metis-menu script doesn't work anymore.

I almost went crazy.
Check the file sb-admin-2.js
end of the file:
var url = window.location;
var element = $('ul.nav a').filter(function() {
return this.href == url || url.href.indexOf(this.href) == 0;
}).addClass('active').parent().parent().addClass('in').parent();
if (element.is('li')) {
element.addClass('active');
commented only that part of the code
/* */