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>
Related
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">
I tried to make a login button which opens up a modal for login details. When I click on the button it is referred to that point where I want it to be. But nothing opens up. A similar problem is with another button that has to open up another modal.
My 2nd problem in about the navbar toggling action is not working. there is no response from the button when I click on the toggle button.
below is my code - :
CODE FOR NAV BAR BUTTON -
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-md fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon "></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo.png" height="30" width="41"></a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#"><span class="fa fa-home fa-lg"></span>
Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html"><span
class="fa fa-info fa-lg"></span> About</a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-list fa-lg"></span> Menu</a>
</li>
<li class="nav-item"><a class="nav-link" href="contactus.html"><span
class="fa fa-address-card fa-lg"></span> Contact</a></li>
</ul>
<span class="navbar-text">
<a data-toggle="modal" href="#loginModal">
<span class="fa fa-sign-in"></span> Login
</a>
</span>
</div>
</div>
</nav>
-------------------------------------------------
-------------------------------------------------
CODE FOR LOGIN MODAL -
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog-centered modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3"
placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1"
id="exampleInputPassword3" placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me
</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-1">Sign in</button>
</div>
</form>
</div>
</div>
</div>enter code here
</div>
</body>
' <!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js">
</script>
<script src="node_modules/popper.js/dist/umd/popper.min.js">
</script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js">
</script>
<script>'$'(document).on('.data-api')</script>
<script>'
.navbar-toggler {bordeR:2px solid red !important;}
body{min-height: 500px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class="navbar navbar-expand-md">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon "></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo.png" height="30" width="41"></a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#"><span class="fa fa-home fa-lg"></span>
Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html"><span
class="fa fa-info fa-lg"></span> About</a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-list fa-lg"></span> Menu</a>
</li>
<li class="nav-item"><a class="nav-link" href="contactus.html"><span
class="fa fa-address-card fa-lg"></span> Contact</a></li>
</ul>
<span class="navbar-text">
<a data-toggle="modal" data-target="#loginModal">
<span class="fa fa-sign-in"></span> Login
</a>
</span>
</div>
</div>
</nav>
<div id="loginModal" class="modal" role="dialog">
<div class="modal-dialog-centered modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3"
placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1"
id="exampleInputPassword3" placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me
</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-1">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
There is no Bootstrap JS and jQuery Added, so without it, modal will not work
do not pass href on login button, instead use data-target="#loginModal"
remove FADE class from modal,
I have removed many other classes from your code just for demo purpose, like fixed top on nav, yuou have have those as per your requirements
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
I am trying to put my card next to my navigation that is vertical, but it decides that it needs to go under. So how can I fix this solution? I've been spending hours on trying to fix this problem
Work:
<?php include 'includes/db.php'?>
<html>
<head>
<title>Admin Panel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="../bootstrap/fonts/css/font-awesome.min.css">
<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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<?php include 'includes/header.php';?>
<div class="col-lg-2">
<ul class="nav flex-column">
<li><a class="nav-link" href="#"><i class="fa fa-tachometer"></i> Dashboard</a></li>
<li><a class="nav-link" href="#new-items" data-toggle="collapse"><i class="fa fa-plus"></i> New</a>
<ul class="collapse" id="new-items">
<li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-pencil"></i> New Post</a></li>
<li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-edit"></i> New Category</a></li>
</ul>
</li>
<li><a class="nav-link" href="#"><i class="fa fa-list"></i> Posts</a></li>
<li><a class="nav-link" href="#"><i class="fa fa-tasks"></i> Categories</a></li>
<li><a class="nav-link" href="#"><i class="fa fa-comment"></i> Comments</a></li>
<li><a class="nav-link" href="#"><i class="fa fa-user"></i> Profile</a></li>
</ul>
</div>
<br/>
<div class="col-lg-8">
<div style="width:50px;height:50px;"></div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<div class="card-block">
<div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div>
<div class="col-xs-9 float-right">
<div style="font-size:2.5em">20</div>
<div style="">Posts</div>
</div>
</div>
</div>
<a href="#">
<div class="card-footer">
<div class="float-left">View Posts</div>
<div class="float-right"><i class="fa fa-arrow-circle-right"></i></div>
<div class="clearfix"></div>
</div>
</a>
</div>
<div class="card">
<div class="card-header">
<div class="card-block">
<div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div>
<div class="col-xs-9 float-right">
<div style="font-size:2.5em">20</div>
<div style="">Posts</div>
</div>
</div>
</div>
<a href="#">
<div class="card-footer">
<div class="float-left">View Posts</div>
<div class="float-right"><i class="fa fa-arrow-circle-right"></i></div>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
<footer></footer>
</body>
</html>
If anyone can figure this out, it will be greatly appreciated Please also note that this is an administrator panel for a blog I am making (Custom CMS) so if you have any ideas on that as well, I will greatly appreciate it.
You could acheive this by Using css floating styles. I add a custom classes for both navigation and cards div and apply float:left property for both divs. Break(br) tag is removed. Immediate first child of card is empty, hence I made it to invisible.
Another method you can use float-left css classes for acheiving float:left css properties in both divs.
Please find the code below.
<html>
<head>
<title>Admin Panel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="../bootstrap/fonts/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<style>
.Cls_navigation,.Cls_card{float:left}
.Cls_card > div:first-child{display:none;}
</style>
</head>
<body>
<?php include 'includes/header.php';?>
<div class="col-lg-2 Cls_navigation">
<ul class="nav flex-column">
<li><a class="nav-link" href="#"><i class="fa fa-tachometer"></i> Dashboard</a></li>
<li><a class="nav-link" href="#new-items" data-toggle="collapse"><i class="fa fa-plus"></i> New</a>
<ul class="collapse" id="new-items">
<li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-pencil"></i> New Post</a></li>
<li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-edit"></i> New Category</a></li>
</ul>
</li>
<li><a class="nav-link" href="#"><i class="fa fa-list"></i> Posts</a></li>
<li><a class="nav-link" href="#"><i class="fa fa-tasks"></i> Categories</a></li>
<li><a class="nav-link" href="#"><i class="fa fa-comment"></i> Comments</a></li>
<li><a class="nav-link" href="#"><i class="fa fa-user"></i> Profile</a></li>
</ul>
</div>
<div class="col-lg-8 Cls_card">
<div style="width:50px;height:50px;"></div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<div class="card-block">
<div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div>
<div class="col-xs-9 float-right">
<div style="font-size:2.5em">20</div>
<div style="">Posts</div>
</div>
</div>
</div>
<a href="#">
<div class="card-footer">
<div class="float-left">View Posts</div>
<div class="float-right"><i class="fa fa-arrow-circle-right"></i></div>
<div class="clearfix"></div>
</div>
</a>
</div>
<div class="card">
<div class="card-header">
<div class="card-block">
<div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div>
<div class="col-xs-9 float-right">
<div style="font-size:2.5em">20</div>
<div style="">Posts</div>
</div>
</div>
</div>
<a href="#">
<div class="card-footer">
<div class="float-left">View Posts</div>
<div class="float-right"><i class="fa fa-arrow-circle-right"></i></div>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
<footer></footer>
</body>
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
/* */