Edit Cart on Html template - html

on the cart page, Quantity, delete button, update cart, Subtotal, Shipping, Total, is not working at all, how i can make them work? This is all i have for cart page:
Also here is the link where you can see it http://194.110.247.137/cart.html.
Thank you!
<!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="Responsive Bootstrap4 Shop Template, Created by Imran Hossain from https://imransdesign.com/">
<!-- title -->
<title>Cart</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/png" href="assets/img/favicon.png">
<!-- google font -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet">
<!-- fontawesome -->
<link rel="stylesheet" href="assets/css/all.min.css">
<!-- bootstrap -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<!-- owl carousel -->
<link rel="stylesheet" href="assets/css/owl.carousel.css">
<!-- magnific popup -->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!-- animate css -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- mean menu css -->
<link rel="stylesheet" href="assets/css/meanmenu.min.css">
<!-- main style -->
<link rel="stylesheet" href="assets/css/main.css">
<!-- responsive -->
<link rel="stylesheet" href="assets/css/responsive.css">
</head>
<body>
<!--PreLoader-->
<div class="loader">
<div class="loader-inner">
<div class="circle"></div>
</div>
</div>
<!--PreLoader Ends-->
<!-- header -->
<div class="top-header-area" id="sticker">
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-12 text-center">
<div class="main-menu-wrap">
<!-- logo -->
<div class="site-logo">
<a href="index.html">
<img src="assets/img/logo.png" alt="">
</a>
</div>
<!-- logo -->
<!-- menu start -->
<nav class="main-menu">
<ul>
<li class="current-list-item">Home
<ul class="sub-menu">
<li>Static Home</li>
<li>Slider Home</li>
</ul>
</li>
<li>About</li>
<li>Pages
<ul class="sub-menu">
<li>404 page</li>
<li>About</li>
<li>Cart</li>
<li>Check Out</li>
<li>Contact</li>
<li>News</li>
<li>Shop</li>
</ul>
</li>
<li>News
<ul class="sub-menu">
<li>News</li>
<li>Single News</li>
</ul>
</li>
<li>Contact</li>
<li>Shop
<ul class="sub-menu">
<li>Shop</li>
<li>Check Out</li>
<li>Single Product</li>
<li>Cart</li>
</ul>
</li>
<li>
<div class="header-icons">
<a class="shopping-cart" href="cart.html"><i class="fas fa-shopping-cart"></i></a>
<a class="mobile-hide search-bar-icon" href="#"><i class="fas fa-search"></i></a>
</div>
</li>
</ul>
</nav>
<a class="mobile-show search-bar-icon" href="#"><i class="fas fa-search"></i></a>
<div class="mobile-menu"></div>
<!-- menu end -->
</div>
</div>
</div>
</div>
</div>
<!-- end header -->
<!-- search area -->
<div class="search-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<span class="close-btn"><i class="fas fa-window-close"></i></span>
<div class="search-bar">
<div class="search-bar-tablecell">
<h3>Search For:</h3>
<input type="text" placeholder="Keywords">
<button type="submit">Search <i class="fas fa-search"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end search arewa -->
<!-- breadcrumb-section -->
<div class="breadcrumb-section breadcrumb-bg">
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2 text-center">
<div class="breadcrumb-text">
<p>Fresh and Organic</p>
<h1>Cart</h1>
</div>
</div>
</div>
</div>
</div>
<!-- end breadcrumb section -->
<!-- cart -->
<div class="cart-section mt-150 mb-150">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-12">
<div class="cart-table-wrap">
<table class="cart-table">
<thead class="cart-table-head">
<tr class="table-head-row">
<th class="product-remove"></th>
<th class="product-image">Product Image</th>
<th class="product-name">Name</th>
<th class="product-price">Price</th>
<th class="product-quantity">Quantity</th>
<th class="product-total">Total</th>
</tr>
</thead>
<tbody>
<tr class="table-body-row">
<td class="product-remove"><i class="far fa-window-close"></i></td>
<td class="product-image"><img src="assets/img/products/product-img-1.jpg" alt=""></td>
<td class="product-name">Strawberry</td>
<td class="product-price">$85</td>
<td class="product-quantity"><input type="number" placeholder="0"></td>
<td class="product-total">1</td>
</tr>
<tr class="table-body-row">
<td class="product-remove"><i class="far fa-window-close"></i></td>
<td class="product-image"><img src="assets/img/products/product-img-2.jpg" alt=""></td>
<td class="product-name">Berry</td>
<td class="product-price">$70</td>
<td class="product-quantity"><input type="number" placeholder="0"></td>
<td class="product-total">1</td>
</tr>
<tr class="table-body-row">
<td class="product-remove"><i class="far fa-window-close"></i></td>
<td class="product-image"><img src="assets/img/products/product-img-3.jpg" alt=""></td>
<td class="product-name">Lemon</td>
<td class="product-price">$35</td>
<td class="product-quantity"><input type="number" placeholder="0"></td>
<td class="product-total">1</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-lg-4">
<div class="total-section">
<table class="total-table">
<thead class="total-table-head">
<tr class="table-total-row">
<th>Total</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr class="total-data">
<td><strong>Subtotal: </strong></td>
<td>$500</td>
</tr>
<tr class="total-data">
<td><strong>Shipping: </strong></td>
<td>$45</td>
</tr>
<tr class="total-data">
<td><strong>Total: </strong></td>
<td>$545</td>
</tr>
</tbody>
</table>
<div class="cart-buttons">
Update Cart
Check Out
</div>
</div>
<div class="coupon-section">
<h3>Apply Coupon</h3>
<div class="coupon-form-wrap">
<form action="index.html">
<p><input type="text" placeholder="Coupon"></p>
<p><input type="submit" value="Apply"></p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end cart -->
<!-- logo carousel -->
<div class="logo-carousel-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="logo-carousel-inner">
<div class="single-logo-item">
<img src="assets/img/company-logos/1.png" alt="">
</div>
<div class="single-logo-item">
<img src="assets/img/company-logos/2.png" alt="">
</div>
<div class="single-logo-item">
<img src="assets/img/company-logos/3.png" alt="">
</div>
<div class="single-logo-item">
<img src="assets/img/company-logos/4.png" alt="">
</div>
<div class="single-logo-item">
<img src="assets/img/company-logos/5.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end logo carousel -->
<!-- footer -->
<div class="footer-area">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="footer-box about-widget">
<h2 class="widget-title">About us</h2>
<p>Ut enim ad minim veniam perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-box get-in-touch">
<h2 class="widget-title">Get in Touch</h2>
<ul>
<li>34/8, East Hukupara, Gifirtok, Sadan.</li>
<li>support#fruitkha.com</li>
<li>+00 111 222 3333</li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-box pages">
<h2 class="widget-title">Pages</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Shop</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-box subscribe">
<h2 class="widget-title">Subscribe</h2>
<p>Subscribe to our mailing list to get the latest updates.</p>
<form action="index.html">
<input type="email" placeholder="Email">
<button type="submit"><i class="fas fa-paper-plane"></i></button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- end footer -->
<!-- copyright -->
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-12">
<p>Copyrights © 2019 - Imran Hossain, All Rights Reserved.<br>
Distributed By - Themewagon
</p>
</div>
<div class="col-lg-6 text-right col-md-12">
<div class="social-icons">
<ul>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin"></i></li>
<li><i class="fab fa-dribbble"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- end copyright -->
<!-- jquery -->
<script src="assets/js/jquery-1.11.3.min.js"></script>
<!-- bootstrap -->
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<!-- count down -->
<script src="assets/js/jquery.countdown.js"></script>
<!-- isotope -->
<script src="assets/js/jquery.isotope-3.0.6.min.js"></script>
<!-- waypoints -->
<script src="assets/js/waypoints.js"></script>
<!-- owl carousel -->
<script src="assets/js/owl.carousel.min.js"></script>
<!-- magnific popup -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!-- mean menu -->
<script src="assets/js/jquery.meanmenu.min.js"></script>
<!-- sticker js -->
<script src="assets/js/sticker.js"></script>
<!-- main js -->
<script src="assets/js/main.js"></script>
</body>
</html>
I dont know what to try because i'm not that good on editing those type of templates.


I guess the template just has some hardcoded items in html but no functionality. The cart page should have a js file that handles all those functionalities that you mentioned.

Related

Horizontal align inside col using many tag Bootstrap4

I have an issue with < a > < finger > < img > < figcaption > ...!
Whey I use only tag < a > and < img > in loop of :::
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 view-waid">
<a href="#">
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
</a>
<a href="#">
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
</a>
Its just work fine view
But when I just insert this
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
It just broke off into vertical. Look Here
I need this to horizontal like a image gallery.
Where is the problem???
I am not using extra CSS.
Here is my full 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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title><tag:main_title /></title>
<!-- Bootstrap 4 CSS. This is for the alpha 3 release of Bootstrap 4. This should be updated when Bootstrap 4 is officially released. -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="http://192.168.0.103/style/mynew_1.0/css/custom.css" rel="stylesheet">
<!-- For icons -->
<link href="http://192.168.0.103/style/mynew_1.0/css/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!-- 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]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav id="topNav" class="navbar navbar-full navbar-fixed-top navbar-dark bg-inverse m-b-1">
<button class="navbar-toggler hidden-md-up pull-right" type="button" data-toggle="collapse" data-target="#navbar">
☰
</button>
<a class="navbar-brand" href="#"><tag:site_name /></a>
<div class="collapse navbar-toggleable-sm" id="navbar">
<tag:main_dropdown />
<!-- Search -->
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-secondary" type="submit">Search</button>
</form>
</ul>
</div>
</nav>
<header>
<div class="header-blurb">
<div class="container">
<div class="row">
<tag:main_header />
</div>
<div class="row">
<div class="col-sm-12 header-blurb-ads">
<h6>ads</h6>
</div>
</div>
<div class="row">
<div class="col-sm-12 header-blurb-ssmenu">
<h6>sub-menu</h6>
</div>
</div>
<div class="row">
<div class="col-sm-12 header-blurb-slideshow">
<h6>slide-show</h6>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<!-- Left Column -->
<div class="col-sm-1 view-waid">
<tag:main_left />
</div>
<!-- /Left Column -->
<!-- Center Column -->
<div class="col-sm-8 view-waid">
<!-- Articles -->
<tag:main_content />
<!-- Img test 2 -->
<!-- Img test 2 -->
</div>
<!-- /Center Column-->
<!-- Right Column -->
<div class="col-sm-3 view-waid">
<tag:main_right />
</div> <!-- /Right Column -->
</div>
</div>
<!--/container-fluid-->
<!-- Image box testing -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 d-flex view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
<!-- /Image box testing -->
<footer>
<div class="footer-blurb">
<div class="container">
<div class="row">
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-text-height" aria-hidden="true"></i> ADS-1</h3>
<p>PLEASE GIVE ADS</p>
<p><a class="btn btn-primary" href="#">FOR SHOW</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-wrench" aria-hidden="true"></i> ADS-2</h3>
<p>PLEASE GIVE ADS -- 2 </p>
<p><a class="btn btn-success" href="#">FOR SHOW - 2</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-paperclip" aria-hidden="true"></i> ADS-3</h3>
<p>PLEASE GIVE ADS -- 3</p>
<p><a class="btn btn-primary" href="#">FOR SHOW - 3</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<!-- Thumbnails -->
<h3><i class="fa fa-camera" aria-hidden="true"></i> ADS-4</h3>
<div class="row">
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=vine" alt="">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=sky" alt=""></a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=sky" alt="">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=vine" alt="">
</a>
</div>
</div>
</div>
</div>
<!-- /.row -->
<h4>MY-Test_IS NOT GOOD</h4>
</div>
</div>
<div class="small-print">
<div class="container">
<p>Terms & Conditions | Privacy Policy | Contact</p>
<p>Copyright © Example.com 2015 </p>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<!-- Bootstrap 4 JavaScript. This is for the alpha 3 release of Bootstrap 4. This should be updated when Bootstrap 4 is officially released. -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<!-- Placeholder Images -->
<script src="js/holder.min.js"></script>
</body>
</html>

Based on your code, just add class row or d-flex next to col-sm-12.
Based on your BS link, just add CSS like:
.row{
display:flex;
flex-wrap:wrap;
}
DEMO
.row{
display:flex;
flex-wrap:wrap;
}
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/…" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 row view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
</div>
</div>

bootstrap (AdminLTE) file upload wizard not showing uploaded filename in the checkbox

I am trying to develop a dashboard using the AdminLTE-3.0.5 starter template. I programmed to upload a file in the sidebar, but the uploaded filename is not shown in the box provided. If I hover mouse on the box I can see the uploaded filename in the tooltip text.
The modified starter page is shown below. What am I missing?
Thanks
<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>test dash</title>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="./AdminLTE-3.0.5/plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="./AdminLTE-3.0.5/dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light" style="background-color: #383c44;">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"
style="color:#d6d7d8"></i></a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="#" class="brand-link">
<img src="./AdminLTE-3.0.5/dist/img/AdminLTELogo.png" alt="AdminLTE Logo"
class="brand-image img-circle elevation-3" style="opacity: .8">
<span class="brand-text font-weight-light">Dashboard</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item has-treeview menu-closed">
<a href="#" class="nav-link active">
<!-- <i class="nav-icon fas fa-tachometer-alt"></i> -->
<p>
data analysis
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<div class="custom-file mb-2 mt-2">
<!-- <input type="file" id="myFile" name="filename2" style="color:#d6d7d8"> -->
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
<div class="input-group input-group-sm mb-2">
<button class="btn btn-primary">Upload</button>
</div>
<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function () {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>
</li>
</ul>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h4 class="m-0 text-dark">Selected Columns</h4>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Box 1</h5>
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-body">
<h5 class="card-title">Box 2</h5>
</div>
</div><!-- /.card -->
</div>
<!-- /.col-md-6 -->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
</div>
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
<div class="p-3">
<h5>Title</h5>
<p>Sidebar content</p>
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="float-right d-none d-sm-inline">
Anything you want
</div>
<!-- Default to the left -->
<strong>Copyright © 2014-2019 AdminLTE.io.</strong> All rights reserved.
</footer>
</div>
<!-- ./wrapper -->
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="./AdminLTE-3.0.5/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="./AdminLTE-3.0.5/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="./AdminLTE-3.0.5/dist/js/adminlte.min.js"></script>
</body>
</html>

you need to import this
<script src=".AdminLTE-3.0.5/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>
and this code to initialize
<script>
$(function () {
bsCustomFileInput.init();
});
</script>

It seems the following required scripts that were provided at the bottom of the body should have been in the head section.
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="./AdminLTE-3.0.5/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="./AdminLTE-3.0.5/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="./AdminLTE-3.0.5/dist/js/adminlte.min.js"></script>

align components in grid: MDL

I need help in arranging components inside the mdl card with grid. I am new to web design can some one help and explain how to arrange. Here I have created three cards and need to put toggle switch inside three cards.
<!doctype html>
<html class=" ui-layout-condensed ui-capitalize-values ui-icons-enabled ">
<head>
<title>thome | DashBoard</title>
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Material Design Lite -->
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="/css/card.css">
<link rel="stylesheet" href="/css/grid.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> </head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header ">
<header class="mdl-layout__header mdl-color--grey-800">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Dashboard</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Dashboard</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Device</a>
<a class="mdl-navigation__link" href="">Rooms</a>
<a class="mdl-navigation__link" href="">Zones</a>
<a class="mdl-navigation__link" href="">Settings</a>
</nav>
</div>
<div class="content-grid mdl-grid">
<div class="demo-card-square mdl-card mdl-shadow--8dp" style="margin:10px;">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">Light</h2>
</div>
<div class="mdl-card__supporting-text mdl-grid">
<form action="#">
This is card for devcie 1
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
View Updates
</a>
</div>
</div>
<div class="demo-card-square mdl-card mdl-shadow--8dp" style="margin:10px;">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">Fan</h2>
</div>
<div class="mdl-card__supporting-text">
This is card for devcie 2
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
View Updates
</a>
</div>
</div>
<div class="demo-card-square mdl-grid mdl-card mdl-shadow--8dp" style="margin:10px;">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">Switch Board</h2>
</div>
<div class="mdl-card__supporting-text mdl-cell--6-col" style>
Smart Switch 1
</div>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect mdl-cell--6-col" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
<span class="mdl-switch__label"></span>
</label>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
View Updates
</a>
</div>
</div>
</html>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

You can achieve this using the grid and mdl-layout-spacer.
Refer: https://getmdl.io/components/#layout-section/grid
<!doctype html>
<html class=" ui-layout-condensed ui-capitalize-values ui-icons-enabled ">
<head>
<title>thome | DashBoard</title>
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Material Design Lite -->
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="/css/card.css">
<link rel="stylesheet" href="/css/grid.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> </head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header ">
<header class="mdl-layout__header mdl-color--grey-800">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Dashboard</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Dashboard</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Device</a>
<a class="mdl-navigation__link" href="">Rooms</a>
<a class="mdl-navigation__link" href="">Zones</a>
<a class="mdl-navigation__link" href="">Settings</a>
</nav>
</div>
<div class="content-grid mdl-grid">
<div class="demo-card-square mdl-card mdl-shadow--8dp" style="margin:10px;">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">Light</h2>
</div>
<div class="mdl-card__supporting-text mdl-grid">
<form action="#">
This is card for devcie 1
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
View Updates
</a>
</div>
</div>
<div class="demo-card-square mdl-card mdl-shadow--8dp" style="margin:10px;">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">Fan</h2>
</div>
<div class="mdl-card__supporting-text">
This is card for devcie 2
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
View Updates
</a>
</div>
</div>
<!-- Card with switch -->
<div class="demo-card-square mdl-grid mdl-card mdl-shadow--8dp" style="margin:10px;">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">Switch Board</h2>
</div>
<div class="mdl-card__supporting-text mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--2-col-phone">Smart Switch 1</div>
<div class="mdl-layout-spacer"></div>
<div class="mdl-card__supporting-text mdl-cell--2-col mdl-cell--2-col-tablet mdl-cell--1-col-phone">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect mdl-cell--12-col" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
<span class="mdl-switch__label"></span>
</label>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">View Updates</a>
</div>
</div> <!-- /Card with switch -->
</html>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

Changing color of active col

I am trying to remove the color of the column border after you have clicked on the image (screenshot). I have been looking through the whole code and been trying to change the colors but am not sure what to change in order to remove the border color. Please advise.
body{font-family:'Roboto',sans-serif;overflow-x:hidden}
#portfolio .portfolio-item{margin:0 0 15px;right:0}
#portfolio .portfolio-item .portfolio-link{display:block;position:relative;max-width:400px;margin:0 auto}
#portfolio .portfolio-item .portfolio-link .caption{background:rgba(255,204,204,.7);position:absolute;width:100%;height:100%;opacity:0;transition:all ease .5s;-webkit-transition:all ease .5s;-moz-transition:all ease .5s}
#portfolio .portfolio-item .portfolio-link .caption:hover{opacity:1}
#portfolio .portfolio-item .portfolio-link .caption .caption-content{position:absolute;width:100%;height:20px;font-size:20px;text-align:center;top:50%;margin-top:-12px;color:#FC9F9F}
.btn-social,.scroll-top,.scroll-top .btn{width:50px;height:50px}
#portfolio .portfolio-item .portfolio-link .caption .caption-content i{margin-top:-12px}
#portfolio .portfolio-item .portfolio-link .caption .caption-content h3,#portfolio .portfolio-item .portfolio-link .caption .caption-content h4{margin:0}
#portfolio *{z-index:2}
#media (min-width:767px){#portfolio .portfolio-item{margin:0 0 30px}}
.floating-label-form-group{position:relative;margin-bottom:0;padding-bottom:.5em;border-bottom:1px solid #eee}
.floating-label-form-group input,.floating-label-form-group textarea{z-index:1;position:relative;padding-right:0;padding-left:0;border:none;border-radius:0;font-size:1.5em;background:0 0;box-shadow:none!important;resize:none}.floating-label-form-group label{display:block;z-index:0;position:relative;top:2em;margin:0;font-size:.85em;line-height:1.764705882em;vertical-align:middle;vertical-align:baseline;opacity:0;-webkit-transition:top .3s ease,opacity .3s ease;-moz-transition:top .3s ease,opacity .3s ease;-ms-transition:top .3s ease,opacity .3s ease;transition:top .3s ease,opacity .3s ease}.
floating-label-form-group:not(:first-child){padding-left:14px;border-left:1px solid #eee}
.floating-label-form-group-with-value label{top:0;opacity:1}.floating-label-form-group-with-focus label{color:#FC9F9F}
form .row:first-child .floating-label-form-group{border-top:1px solid #eee}
.btn-outline{color:#FC9F9F;font-size:20px;border:2px solid #FC9F9F;background:0 0;transition:all .3s ease-in-out;margin-top:15px}
.btn-outline.active,.btn-outline:active,.btn-outline:focus,.btn-outline:hover{color:#FC9F9F;background:#fff;border:2px solid #fff}
.btn-primary.active,.btn-primary:active,.btn-success.active,.btn-success:active,.open .dropdown-toggle.btn-primary,.open .dropdown-toggle.btn-success{background-image:none}
.btn-primary{color:#FC9F9F;background-color:#FC9F9F;border-color:#FC9F9F;font-weight:700}
.btn-primary.active,.btn-primary:active,.btn-primary:focus,.btn-primary:hover,.open .dropdown-toggle.btn-primary{color:#fff;background-color:#FC9F9F;border-color:#FC9F9F}
.btn-primary.disabled,.btn-primary.disabled.active,.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled],.btn-primary[disabled].active,.btn-primary[disabled]:active,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary.active,fieldset[disabled] .btn-primary:active,fieldset[disabled]
.btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#FC9F9F;border-color:#FC9F9F}
.btn-primary .badge{color:#FC9F9F;background-color:#FC9F9F}.btn-success{color:#FC9F9F;background-color:#FC9F9F;border-color:#FC9F9F;font-weight:700}
.btn-success.active,.btn-success:active,.btn-success:focus,.btn-success:hover,.open .dropdown-toggle.btn-success{color:#fff;background-color:#FC9F9F;border-color:#FC9F9F}
.btn-success.disabled,.btn-success.disabled.active,.btn-success.disabled:active,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled],.btn-success[disabled].active,.btn-success[disabled]:active,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success,fieldset[disabled] .btn-success.active,fieldset[disabled] .btn-success:active,fieldset[disabled] .btn-success:focus,fieldset[disabled]
.btn-success:hover{background-color:#FC9F9F;border-color:#FC9F9F}.btn-success .badge{color:#FC9F9F;background-color:#fff}
.btn-social{display:inline-block;border:2px solid #FC9F9F;border-radius:100%;text-align:center;font-size:20px;line-height:45px}
.btn.active,.btn:active,.btn:focus{outline:0}.scroll-top{position:fixed;right:2%;bottom:2%;z-index:1049}
.scroll-top .btn{font-size:20px;border-radius:100%;line-height:28px}.scroll-top .btn:focus{outline:0}
.portfolio-modal .modal-content{border-radius:0;background-clip:border-box;-webkit-box-shadow:none;box-shadow:none;border:none;min-height:100%;padding:100px 0;text-align:center}
.portfolio-modal .modal-content h2{margin:0;font-size:3em}.portfolio-modal .modal-content img{margin-bottom:30px}.portfolio-modal .modal-content .item-details{margin:30px 0}
.portfolio-modal .close-modal{position:absolute;width:75px;height:75px;background-color:transparent;top:25px;right:25px;cursor:pointer}
.portfolio-modal .close-modal:hover{opacity:.3}
.portfolio-modal .close-modal .lr{height:75px;width:1px;margin-left:35px;background-color:#FC9F9F;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);z-index:1051}
.portfolio-modal .close-modal .lr .rl{height:75px;width:1px;background-color:#FC9F9F;transform:rotate(90deg);-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);z-index:1052}
.portfolio-modal .modal-backdrop{opacity:0;display:none}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>J</title>
<!-- Bootstrap Core CSS -->
<!-- Theme CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="css/freelancer.min.css" rel="stylesheet">
<link href="css/sticky-footer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link rel="icon" type="image/png" href="img/icon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/simplegrid.css" />
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display|Roboto:300" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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">
<!-- 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>
<!-- 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]-->
<!-- Navigation -->
</head>
<body>
<header>
<div class="container navbar-container navbar-fixed-top" role="navigation">
<div 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">
<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="http://"><img onload="this.style.opacity='1!important';" class= "logo" src="img/logo.png"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left active"><a href="http://www.> PORTFOLIO </a></li>
<li class="navbar-left"> INSPO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</div>
</div>
</header>
<style>
.row {
background: #ffffff;
padding: 0px;
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: #4a4a4a;
}
#media (min-width:468px) and (max-width:690px){
.content {
font-size: 14px;
}
</style>
<!-- Portfolio Grid Section -->
<br>
<section id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h4></h4>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
</div>
</div>
<img src="img/logos-set.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
</div>
</div>
<img src="img/logos-set.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
</div>
</div>
<img src="img/logos-set.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
</div>
</div>
<img src="img/logos-set.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal5" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
</div>
</div>
<img src="img/logos-set.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
</div>
</div>
<img src="img/logos-set.png" class="img-responsive" alt="">
</a>
</div>
</div>
</div>
</section>
<!---End Contet-->
<!-- Portfolio Modals -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h4 style=" font-family: 'Roboto', sans-serif;
font-size: 20px;
color: #4a4a4a;">LOGOS</h4>
<hr class="star-primary">
<img src="img/logos.png" class="img-responsive img-centered" alt="">
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Title</h2>
<hr class="star-primary">
<img src="img/portfolio/cake.png" class="img-responsive img-centered" alt="">
<p>Use this area of the page to describe your project. The icon above is part of a free icon set by Flat Icons. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
<ul class="list-inline item-details">
<li>Client:
<strong>Start Bootstrap
</strong>
</li>
<li>Date:
<strong>April 2014
</strong>
</li>
<li>Service:
<strong>Web Development
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Title</h2>
<hr class="star-primary">
<img src="img/portfolio/circus.png" class="img-responsive img-centered" alt="">
<p>Use this area of the page to describe your project. The icon above is part of a free icon set by Flat Icons. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
<ul class="list-inline item-details">
<li>Client:
<strong>Start Bootstrap
</strong>
</li>
<li>Date:
<strong>April 2014
</strong>
</li>
<li>Service:
<strong>Web Development
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Title</h2>
<hr class="star-primary">
<img src="img/portfolio/game.png" class="img-responsive img-centered" alt="">
<p>Use this area of the page to describe your project. The icon above is part of a free icon set by Flat Icons. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
<ul class="list-inline item-details">
<li>Client:
<strong>Start Bootstrap
</strong>
</li>
<li>Date:
<strong>April 2014
</strong>
</li>
<li>Service:
<strong>Web Development
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Title</h2>
<hr class="star-primary">
<img src="img/portfolio/safe.png" class="img-responsive img-centered" alt="">
<p>Use this area of the page to describe your project. The icon above is part of a free icon set by Flat Icons. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
<ul class="list-inline item-details">
<li>Client:
<strong>Start Bootstrap
</strong>
</li>
<li>Date:
<strong>April 2014
</strong>
</li>
<li>Service:
<strong>Web Development
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Title</h2>
<hr class="star-primary">
<img src="img/portfolio/submarine.png" class="img-responsive img-centered" alt="">
<p>Use this area of the page to describe your project. The icon above is part of a free icon set by Flat Icons. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
<ul class="list-inline item-details">
<li>Client:
<strong>Start Bootstrap
</strong>
</li>
<li>Date:
<strong>April 2014
</strong>
</li>
<li>Service:
<strong>Web Development
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span>Copyright © 2017. . All rights reserved.</span>
</div>
</footer>
<!---End Footer-->
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/freelancer.min.js"></script>
</body>
</html>

Set outline:none on focus
.portfolio-link:focus {
outline: none;
}

White space at the bottom of my website

Well, I have a weird problem. I search a lot for the last several hours and all the similar problems couldn't fit exactly on my own.
In my website, all the urls with a second slash have a big white space at the bottom of the website. All the site above this space is scrollabe.
I have the same CSS file in all my url
http://localhost/testurl
http://localhost/testurl/withanotherslash
The first url doesn't have a problem, while the second has the white space. I checked the same html file in both urls.
Here is how I load the css in the second url:
<link rel="stylesheet" href="../static/css/bootstrap.min.css" />
<link rel="stylesheet" href="../static/css/jquery-ui.css" />
<link rel="stylesheet" href="../static/css/font-awesome.css" />
<link rel="stylesheet" href="../static/css/unicorn.css" />
I use two dots in the second url and one dot in the first url. I test it in Chrome and Firefox.
Here is a screenshot:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../static/css/bootstrap.min.css" />
<link rel="stylesheet" href="../static/css/jquery-ui.css" />
<link rel="stylesheet" href="../static/css/font-awesome.css" />
<link rel="stylesheet" href="../static/css/unicorn.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/unicorn.js"></script>
</head>
<body data-color="grey">
<div id="wrapper">
<div id="header">
<div style="width:200px;">
<img style="display:block;margin-left:auto;margin-right:auto;padding-top:5px" src="../static/img/paulie.gif"/>
</div>
</div>
<div id="sidebar">
<div id="search" style="margin-top:80px">
<form method="post" action="/authorsearch">
<input type="text" name='authorname' placeholder="Search for an author...">
<button type="submit"></button>
</form>
</div>
<ul>
<li><i class="fa fa-home"></i><span>Dashboard</span></li>
<li><i class="fa fa-book"></i><span>Articles</span></li>
<li><i class="fa fa-user"></i><span>Editors</span></li>
<li><i class="fa fa-user"></i><span>Authors</span></li>
<li><i class="fa fa-globe"></i><span>Countries</span></li>
<li class="submenu">
<i class="fa fa-flask"></i><span>Settings</span>
<ul>
<li><span>Add an article</span></li>
<li><span>Add a user</span></li>
<li><span>All users</span></li>
</ul>
</li>
</ul>
</div>
<div id="content">
<div id="content-header" class="mini">
<h1>My title</h1>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 center" style="text-align: center;">
<ul class="quick-actions">
<li>
<a href="/">
<i class="icon-home"></i>
Dashboard
</a>
</li>
<li>
<a href="/articles">
<i class="icon-survey"></i>
Articles
</a>
</li>
<li>
<a href="/editors">
<i class="icon-people"></i>
Editors
</a>
</li>
<li>
<a href="/authors">
<i class="icon-people"></i>
Authors
</a>
</li>
<li>
<a href="/countries">
<i class="icon-web"></i>
Countries
</a>
</li>
</ul>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<div class="widget-box">
<div class="widget-title">
<h5>Users Database</h5>
</div>
<div class="widget-content nopadding">
<table id="myTable" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Username</th>
<th>Password</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
%for user in users:
<tr>
<td>{{user['username']}}</td>
<td>{{user['password']}}</td>
<td>test</td>
</tr>
%end
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-bottom:0px">
<div id="footer" class="col-xs-12">
2014 © Title. Brought to you by me
</div>
</div>
</div>
</body>
</html>
The CSS file is from this bootstrap template
And here is my backend in Python Bottle and how I call the CSS files:
#bottle.get('/static/css/<filename:re:.*\.css>')
def stylesheets(filename):
return bottle.static_file(filename, root='./static/css/')

That's how the theme is designed to work. On a shorter page like this one you'll see that gap on larger screens.
An easy solution is to set the body background color to the same as the footer/wrapper color, which extends the footer color to the bottom of the page. E.g.
body {background: #3c3c3c;}
An alternative would be to use a sticky footer setup, but that's messier and might look a bit silly anyhow.