I need some help because I can't find a way to customize the way bootstrap cards are displayed on the screen.
For example, when the screen width is 860 I would like for it to only load 2 cards instead of 3 and when the width is like 600 it to load 2 but smaller so they fit in the same row! Is there any way I can achieve this result?
/* Title */
#cc{
position: relative;
text-align: center;
margin-top: 180px;
}
#Slogan{
text-transform: uppercase;
font-weight: 400;
font-size: 70px;
}
.text-gray-soft{
margin-top: 6px;
color: rgba(0, 0, 0, 0.5);
}
#btn{
margin-top: 20px;
}
/* Newest TAB */
#media (min-width: 500px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 50px;
}
.line1{
margin-right: 50px;
}
.card{
position: relative;
margin-bottom: 20px;
text-align: center;
}
}
#media (min-width: 992px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 200px;
}
.line1{
margin-right: 200px;
}
.card{
margin-bottom: 20px;
margin-left: 30px;
}
}
#media (min-width: 1300px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 300px;
}
.line1{
margin-right: 300px;
}
.card{
margin-bottom: 20px;
margin-left: 30px;
}
}
#media (min-width: 1800px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 400px;
}
.line1{
margin-right: 400px;
}
.card{
margin-bottom: 20px;
margin-left: 30px;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" href="static/css/index.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">BoostTemplates</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Shop</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</div>
</nav>
</div>
<div class="cointainer" id="cc">
<h1 class="display-1 text-bold" id="Slogan">Make <br>anything</h1>
<h5 class="text-gray-soft">All the themes you need in one place.</h5>
<button type="button" class="btn btn-dark btn-lg" id="btn" >SHOP</button>
</div>
<div class="cointainer" id="nn">
<h4 class="display-5 NewestT">Newest</h4>
<h6 class="text-gray-soft">Recently added to the shop</h6>
<hr class="line1">
</div>
<div class="container" id="containerpart">
<div class="row">
<div class="col-sm">
<div class="card" style="width: 18rem;">
<img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<p class="card-text">Clean and simple dashboard and admin interface.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="width: 18rem;">
<img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<p class="card-text">Clean and simple dashboard and admin interface.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="width: 18rem;">
<img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<p class="card-text">Clean and simple dashboard and admin interface.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</body>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>
The idea is that you define a row and inside it, you define your cols.
Imagine each row to be divided into 12 sections. You then assign on each col how many of these sections you want it to cover, on each screen size category.
Thus if you want on small screens to have 2 cards per row and on bigger screens 3 per row, you set col-6 col-md-4, this means on Extra small screens (smaller than 576px) cover 6 out of 12 (1/2), while on small screens or bigger (greater or equal to 576px) cover 4 out of 12 (1/3).
Example code:
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">
Card 1
</div>
<div class="col-6 col-sm-4">
Card 2
</div>
<div class="col-6 col-sm-4">
Card 3
</div>
<div class="col-6 col-sm-4">
Card 4
</div>
<div class="col-6 col-sm-4">
Card 5
</div>
<div class="col-6 col-sm-4">
Card 6
</div>
</div>
</div>
Based on your code
/* Title */
#cc{
position: relative;
text-align: center;
margin-top: 180px;
}
#Slogan{
text-transform: uppercase;
font-weight: 400;
font-size: 70px;
}
.text-gray-soft{
margin-top: 6px;
color: rgba(0, 0, 0, 0.5);
}
#btn{
margin-top: 20px;
}
/* Newest TAB */
#media (min-width: 500px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 50px;
}
.line1{
margin-right: 50px;
}
.card{
position: relative;
margin-bottom: 20px;
text-align: center;
}
}
#media (min-width: 992px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 200px;
}
.line1{
margin-right: 200px;
}
.card{
margin-bottom: 20px;
margin-left: 30px;
}
}
#media (min-width: 1300px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 300px;
}
.line1{
margin-right: 300px;
}
.card{
margin-bottom: 20px;
margin-left: 30px;
}
}
#media (min-width: 1800px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 400px;
}
.line1{
margin-right: 400px;
}
.card{
margin-bottom: 20px;
margin-left: 30px;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" href="static/css/index.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">BoostTemplates</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Shop</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</div>
</nav>
</div>
<div class="cointainer" id="cc">
<h1 class="display-1 text-bold" id="Slogan">Make <br>anything</h1>
<h5 class="text-gray-soft">All the themes you need in one place.</h5>
<button type="button" class="btn btn-dark btn-lg" id="btn" >SHOP</button>
</div>
<div class="cointainer" id="nn">
<h4 class="display-5 NewestT">Newest</h4>
<h6 class="text-gray-soft">Recently added to the shop</h6>
<hr class="line1">
</div>
<div class="container" id="containerpart">
<div class="row">
<div class="col-6 col-sm-4">
<div class="card" style="width: 18rem;">
<img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<p class="card-text">Clean and simple dashboard and admin interface.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-6 col-sm-4">
<div class="card" style="width: 18rem;">
<img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<p class="card-text">Clean and simple dashboard and admin interface.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-6 col-sm-4">
<div class="card" style="width: 18rem;">
<img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<p class="card-text">Clean and simple dashboard and admin interface.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</body>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>
Related
I want the navbar to stay on the same row, I believe the flex layout is stacking the columns and giving them 100% width. This means I end up with the icons and website name all stacked instead of on the left, center, and right. Is there a simple solution here I'm missing? Not really familiar with flex.
JSFiddle link because I had trouble getting the bootstreap css working in the Stack Overflow snippet
HTML:
<!doctype html>
<html lang="en" class="h-100">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="d-flex h-100 text-center text-white">
<div class="cover-container d-flex w-100 h-100 mx-auto flex-column">
<header class="mb-auto" id="nav">
<div class="row justify-content-between">
<div class="col-xs-4 col-sm-4 mt-4">
<a class="nav-link first-icon ms-3" href="#">
<i class="fa fa-car"></i>
</a>
</div>
<div class="col-xs-4 col-sm-4 brand-logo">
<h3 class="justify-content-center mt-3 fw-bold">Website Name</h3>
</div>
<div class="col-xs-4 col-sm-4">
<nav class="nav nav-masthead float-end mt-4 me-3">
<a class="nav-link">
<i class="fa fa-car"></i>
</a>
<a class="nav-link" href="#">
<i class="fa fa-car"></i>
</a>
<a class="nav-link" href="#">
<i class="fa fa-car"></i>
</a>
</nav>
</div>
</div>
</header>
</div>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js" integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
CSS:
body {
background-color: #000000;
}
#nav {
height: 4rem;
border-bottom: 1px solid #3a3a3c;
}
.icon {
height: 30px;
width: 30px;
cursor: pointer;
}
.stats-icon {
height: 27.5px !important;
width: 27.5px !important;
}
.nav-masthead .nav-link {
padding: .25rem 0;
font-weight: 700;
color: #fff;
background-color: transparent;
border-bottom: .10rem solid transparent;
cursor: pointer;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
#media screen and (max-width: 768px) {
.first-icon {
float: left;
}
}
I am trying to get my carousel to work however after I changed the size of it all it breaks the carousel itself and I am not exactly sure. Any help would be great as I am very new to responsive designs. I'm not really sure how this all works but my placeholder images do scale to the size of the device well. So I am just not sure why the carousel is no longer working.
Thanks in advance all!
/*Main*/
html, body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
background-color: lightgreen;
}
/*NavBar*/
#logo-space{
width: auto;
height: auto;
background-color: #0f2471;
}
#logo-space img{
width: auto;
height: auto;
position: relative;
left: 2rem;
}
.nav-bar{
background-color: #16377e;
position: relative;
}
#navbar-space .nav-link{
position: relative;
left: 4rem;
}
/*Carousel*/
.home .carousel-item{
min-height: 100vh;
background-position: center;
background-size: cover;
position: relative;
z-index: 1;
}
.home .carousel-item:before{
content: '';
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: -1;
}
.home .carousel-item.active h2{
animation: fadeInLeft 0.5s ease forwards;
}
.home .carousel-item.active p{
animation: fadeInRight 0.5s ease forwards;
}
/*responsive*/
#media(max-width: 767px){
.home .carousel-control-next,
.home .carousel-control-prev{
display: none;
}
.home .carousel-indicators li{
height: 60px;
width: 60px;
}
.home .carousel-item h2{
font-size: 45px;
}
.home .carousel-item p{
font-size: 22px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/b5212ab333.js" crossorigin="anonymous"></script>
<!--Index Stylesheet-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
</style>
</head>
<body>
<!--Logo Space-->
<div id="logo-space">
<div class="row">
<div class="col">
<img src="img/logo.png" class="image-fluid" alt="">
</div>
</div>
</div>
<!--Nav Bar-->
<div id="home">
<nav id="navbar-space" class="navbar navbar-expand-lg nav-bar">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active text-white" aria-current="page" href="#home">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#about">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link text-white " href="#divisions">DIVISIONS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white " href="#appeals">APPEALS</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!--Carousel-->
<section id="carouselSection" class="home carousel slide position-absolute" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/1920x700" class="d-block w-100 img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x700" class="d-block w-100 img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x700" class="d-block w-100 img-fluid" alt="...">
</div>
</div>
</section>
</body>
</html>
The toggle button used in my html code is not working. I tried to design with bootstrap. I'm new to bootstrap. I gave my index.html file and main.js file. I have no idea where my mistake is. Since I am a beginner, it is very helpful to have your help. Thanks in advance to everyone.
My index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin panel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<img src="default.jpg" class="img-fluid" alt="Responsive image">
<div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name</div>
<div class="email">Email</div>
</div>
<ul class="list-unstyled components">
<p>The Providers</p>
<li>
Dashboard
</li>
<li>
Pending Request
</li>
<li>
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 1
</li>
</ul>
</li>
<li class="active">
Policy
</li>
<li>
Logout
</li>
</ul>
</nav>
<!-- Page content holder -->
<div class="page-content p-5" id="content">
<!-- Toggle button -->
<button id="sidebarCollapse" type="button" class="btn btn-light bg-white rounded-pill shadow-sm px-4 mb-4"><i class="fa fa-bars mr-2"></i><small class="text-uppercase font-weight-bold">Toggle</small></button>
<!-- Demo content -->
<h2 class="display-4 text-black">Bootstrap vertical nav</h2>
<p class="lead text-black mb-0">Build a fixed sidebar using Bootstrap 4 vertical navigation and media objects.</p>
<div class="separator"></div>
<div class="row text-black">
<div class="col-lg-12">
</div>
</div>
</div>
<!-- End demo content -->
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
My main.js file:
$(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar, #content').toggleClass('active');
});
});
My style.css file
body {
font-family: 'poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
/* Side Bar */
.wrapper {
display: flex;
text-decoration: none;
transition: all 0.3s;
}
.page-content {
width: calc(100% - 17rem);
margin-left: 0rem;
transition: all 0.4s;
}
#sidebar {
min-width: 250px;
max-width: 250px;
height: 100vh;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar .active {
background-color: #e2694b;
}
.components li .active {
background-color: #261313;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul .components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7385D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapase"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20%;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#sidebar img {
width: 30%;
}
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar .active {
margin-left: 0px;
}
#sidebarCollapase span {
display: none;
}
}
function toggleIcon(e) {
$(e.target)
.prev('.panel-heading')
.find(".more-less")
.toggleClass('glyphicon-plus glyphicon-minus');
}
$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin panel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<img src="default.jpg" class="img-fluid" alt="Responsive image">
<div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name</div>
<div class="email">Email</div>
</div>
<ul class="list-unstyled components">
<p>The Providers</p>
<li>
Dashboard
</li>
<li>
Pending Request
</li>
<li>
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 1
</li>
</ul>
</li>
<li class="active">
Policy
</li>
<li>
Logout
</li>
</ul>
</nav>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<button data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn btn-light bg-white rounded-pill shadow-sm px-4 mb-4"><i class="fa fa-bars mr-2"></i><small class="text-uppercase font-weight-bold">Toggle</small></button>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<h2 class="display-4 text-black">Bootstrap vertical nav</h2>
<p class="lead text-black mb-0">Build a fixed sidebar using Bootstrap 4 vertical navigation and media objects.</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
I'm building a website with C9 and whenever I try and run the webpage and visit it, it simply freezes and stops loading. It loads in the bootstrap and I don't think it's loading in the ../css/hub.css
$(function() {
var rightVal = -350; // base value
$(".five-column").click(function() {
event.stopPropagation();
rightVal = (rightVal * -1) - 350; // calculate new value
$(".drop-details").animate({
right: rightVal + 'px'
}, {
queue: false,
duration: 500
});
});
});
$(function() {
var closeRightVal = -350;
$(".close-details").click(function() {
event.stopPropagation();
$(".drop-details").animate({
right: closeRightVal + 'px'
}, {
queue: false,
duration: 500
});
});
})
$(function() {
$(".nav-custom").on('touchmove', function(e) {
e.preventDefault();
});
});
$(function() {
$(".content").on('touchmove', function(e) {
e.preventDefault();
});
});
$(function() {
$(".inner-nav").on('touchmove', function(e) {
e.preventDefault();
});
});
$(function() {
$(window).resize(function() {
var dropWidth = $(".five-column").width();
$(".drop").css("height", dropWidth + 'px');
$(".five-column").css("min-height", dropWidth + 20 + 'px');
});
});
* {
overflow: hidden;
}
html {
height: 100%;
margin: 0;
max-width: 100%;
}
body {
font-family: 'Ubuntu', sans-serif;
background-color: #F9F9F9;
margin: 0;
height: 100%;
max-width: 100%;
-webkit-font-smoothing: antialiased;
position: fixed;
}
/* Page Components */
.content {
min-width: 100%;
float: right;
height: 100%;
overflow-y: scroll;
overflow-x: none;
margin-left: 250px;
}
.content::-webkit-scrollbar {
display: none;
}
.page-content {
min-width: calc(100% - 250px);
max-width: calc(100% - 250px);
min-height: 100%;
margin-top: 0;
overflow-y: scroll;
float: right;
overflow-x: hidden;
}
.drop-details {
height: 100%;
width: 350px;
z-index: 1000;
color: #FFF;
position: absolute;
right: -350px;
background-color: #FFF000;
}
/* Hub Top */
.hub-jumbo {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('hub-bg.png');
background-size: cover;
background-position: center;
padding-top: 36px;
padding-bottom: 36px;
margin-bottom: 18px;
}
.hub-header {
text-align: center;
}
h2 {
margin-bottom: 0;
}
.hub-btns {
display: block;
margin-bottom: 15px;
width: 100%;
text-align: center;
}
.hub-btns .copy-link {
border-bottom-color: #EBEBEB;
}
.hub-btns .create-drop:hover {
background-color: #03a9f4;
}
.hub-btns .create-drop:focus {
background-color: #03a9f4;
border-bottom-color: #0398db;
}
.hub-btns a {
margin: 0 10px;
}
/* End of top */
.container-fluid {
padding: 0;
margin: 0;
height: 10%;
min-width: 100%;
max-width: 100%;
margin-left: 4px;
overflow-y: auto;
margin-right: 0;
}
.ad-box {
width: 20%;
height: 250px;
display: inline-block;
margin: 0;
overflow: hidden;
padding: 0;
margin-right: -14px;
top: 50%;
transform: translateY(-50%);
background-color: #000000;
vertical-align: middle;
}
.ad-text {
text-align: center;
color: #FFFFFF;
}
.push-div {
height: 50px;
}
.five-column {
min-width: calc(20% - 20px);
padding: 0;
max-height: 194px;
display: inline-block;
margin: 0;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 14px;
}
.row {
display: inline-block;
max-width: calc(80% - 14px);
margin: 0;
margin-left: 0;
}
/* Drop Styles */
.drop {
width: 100%;
height: 180px;
background-color: #FFF;
border-bottom: 3px solid #EBEBEB;
display: block;
margin: 0 auto;
border-radius: 5px;
}
.drop-image {
background-image: url('http://protiumdesign.com/wp-content/uploads/2015/03/Flat-Space-Wallpaper-1024.jpg');
background-size: cover;
background-position: center;
}
.drop .name {
height: 36px;
line-height: 36px;
text-align: center;
color: #FFF;
background-color: #03a9f4;
font-size: 1em;
}
.drop .icon {
height: 80px;
vertical-align: middle;
display: block;
margin: 0 auto;
margin-top: 32px;
}
/* SCALING */
#media only screen and (max-width: 1400px) {
.five-column {
min-width: calc(25% - 20px);
}
.drop .name {
font-size: 1.10em;
}
}
#media only screen and (max-width: 1200px) {
.ad-box {
display: none;
}
.row {
max-width: calc(100% - 14px);
}
.five-column {
min-width: calc(33% - 20px);
}
.drop .name {
font-size: 1.20em;
}
}
#media only screen and (max-width: 1000px) {
.five-column {
min-width: calc(50% - 20px);
}
.drop .name {
font-size: 1.30em;
}
.user-name {
left: 7%;
}
.more-dropup {
left: 5%;
}
.user-image {
left: 2%;
}
}
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<title>Hub</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<!-- Mobile Optimization -->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<!-- Custom styling -->
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet" />
<link rel="stylesheet" href="../css/hub.css" type="text/css" />
<link rel="stylesheet" href="../partials/nav.css" type="text/css" />
<link rel="stylesheet" href="../css/components.css" type="text/css" />
<!-- Imported Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
</head>
<body>
<div class="nav-custom">
<a class="venos_logo" href="hubs.html">
<img src="venos_logo.png">
</a>
<div class="inner-nav">
<ul class="upper-items smooth">
<li class="label">NAVIGATE</li>
<li class="link"><i class="material-icons nav-icon">home</i> Dashboard
</li>
<li class="link"><i class="material-icons nav-icon">notifications</i> Notifications
</li>
<li class="link"><i class="material-icons nav-icon">cloud</i> Synced Files
</li>
<li class="link"><i class="material-icons nav-icon">create</i> Create Hub
</li>
</ul>
<ul class="lower-items">
<li class="label">HUBS</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Jason's Vacation 2016
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> San Haven Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Bismarck Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Fargo Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Velva Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Dank Memes
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Squad
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Summer 2017
</li>
</ul>
<div class="show-hubs btn btn-lg txt-white bg-blue no-border" href="" role="button">Show More</div>
</div>
<div class="nav-push-div"></div>
<div class="more-menu">
<ul>
<li><a class="more-menu-link nonactive txt-blue" href="settings.html">Settings</a>
</li>
<li><a class="more-menu-link nonactive txt-blue" href="signout.html">Signout</a>
</li>
</ul>
</div>
<div class="nav-user">
<div class="user-image"></div>
<span class="user-name">Jason Procka</span>
<button type="button" class="more-dropup">
<i class="material-icons nav-more-btn">more_horiz</i>
</button>
</div>
</div>
<div class="content">
<div class="page-content">
<div class="jumbotron hub-jumbo">
<div class="hub-header">
<div class="container">
<h2 class="txt-white">Jason's Summer Vacation</h2>
<p class="txt-white">There doesn't seem to be a description here!</p>
</div>
</div>
<div class="hub-btns">
<a class="copy-link btn btn-lg btn-wide bg-white txt-blue" href="" role="button">Copy Link</a>
<a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-dark-blue" href="" role="button">Create Drop</a>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="five-column">
<div class="drop">
<div class="name">1.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop drop-image">
<div class="name">2.png</div>
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">3.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">4.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">5.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">6.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">7.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">8.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">9.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">10.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
</div>
<div class="ad-box">
<span class="ad-text">Your ad here.</span>
</div>
</div>
<div class="push-div"></div>
</div>
<div class="drop-details">
<button class="close-details">
<i class="material-icons">close</i>
</button>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
<script type="text/javascript" src="../js/hub.js"></script>
</body>
</html>
Here's the link to the webpage to see if it does the same thing for you:
https://venos-git-jasonprocka1.c9users.io/www/html/hub.html
I've already worked on clearing cookies and nothing seems to work. Something has to be wrong with my code.
Any help is greatly appreciated! Thanks!
On the page linked, you have not included the required tether.js library.
Also, the page is requesting a wallpaper image over http (but the page itself is hosted on https, usually you get a warning on the browser's console about this)
And, it's making references to a nav.css file but it cannot find it.
As a side note, you do not need to have each event handler declared in its own function() declaration. You could combined them all in one as below:
$(function() {
// five-column click
var rightVal = -350; // base value
$(".five-column").click(function() {
event.stopPropagation();
rightVal = (rightVal * -1) - 350; // calculate new value
$(".drop-details").animate({
right: rightVal + 'px'
}, {
queue: false,
duration: 500
});
});
// close-detail click
var closeRightVal = -350;
$(".close-details").click(function() {
event.stopPropagation();
$(".drop-details").animate({
right: closeRightVal + 'px'
}, {
queue: false,
duration: 500
});
});
// nav-custom touchmove
$(".nav-custom").on('touchmove', function(e) {
e.preventDefault();
});
// content touchmove
$(".content").on('touchmove', function(e) {
e.preventDefault();
});
// inner-nav touchmove
$(".inner-nav").on('touchmove', function(e) {
e.preventDefault();
});
// window resize
$(window).resize(function() {
var dropWidth = $(".five-column").width();
$(".drop").css("height", dropWidth + 'px');
$(".five-column").css("min-height", dropWidth + 20 + 'px');
});
});
* {
overflow: hidden;
}
html {
height: 100%;
margin: 0;
max-width: 100%;
}
body {
font-family: 'Ubuntu', sans-serif;
background-color: #F9F9F9;
margin: 0;
height: 100%;
max-width: 100%;
-webkit-font-smoothing: antialiased;
position: fixed;
}
/* Page Components */
.content {
min-width: 100%;
float: right;
height: 100%;
overflow-y: scroll;
overflow-x: none;
margin-left: 250px;
}
.content::-webkit-scrollbar {
display: none;
}
.page-content {
min-width: calc(100% - 250px);
max-width: calc(100% - 250px);
min-height: 100%;
margin-top: 0;
overflow-y: scroll;
float: right;
overflow-x: hidden;
}
.drop-details {
height: 100%;
width: 350px;
z-index: 1000;
color: #FFF;
position: absolute;
right: -350px;
background-color: #FFF000;
}
/* Hub Top */
.hub-jumbo {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('hub-bg.png');
background-size: cover;
background-position: center;
padding-top: 36px;
padding-bottom: 36px;
margin-bottom: 18px;
}
.hub-header {
text-align: center;
}
h2 {
margin-bottom: 0;
}
.hub-btns {
display: block;
margin-bottom: 15px;
width: 100%;
text-align: center;
}
.hub-btns .copy-link {
border-bottom-color: #EBEBEB;
}
.hub-btns .create-drop:hover {
background-color: #03a9f4;
}
.hub-btns .create-drop:focus {
background-color: #03a9f4;
border-bottom-color: #0398db;
}
.hub-btns a {
margin: 0 10px;
}
/* End of top */
.container-fluid {
padding: 0;
margin: 0;
height: 10%;
min-width: 100%;
max-width: 100%;
margin-left: 4px;
overflow-y: auto;
margin-right: 0;
}
.ad-box {
width: 20%;
height: 250px;
display: inline-block;
margin: 0;
overflow: hidden;
padding: 0;
margin-right: -14px;
top: 50%;
transform: translateY(-50%);
background-color: #000000;
vertical-align: middle;
}
.ad-text {
text-align: center;
color: #FFFFFF;
}
.push-div {
height: 50px;
}
.five-column {
min-width: calc(20% - 20px);
padding: 0;
max-height: 194px;
display: inline-block;
margin: 0;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 14px;
}
.row {
display: inline-block;
max-width: calc(80% - 14px);
margin: 0;
margin-left: 0;
}
/* Drop Styles */
.drop {
width: 100%;
height: 180px;
background-color: #FFF;
border-bottom: 3px solid #EBEBEB;
display: block;
margin: 0 auto;
border-radius: 5px;
}
.drop-image {
background-image: url('http://protiumdesign.com/wp-content/uploads/2015/03/Flat-Space-Wallpaper-1024.jpg');
background-size: cover;
background-position: center;
}
.drop .name {
height: 36px;
line-height: 36px;
text-align: center;
color: #FFF;
background-color: #03a9f4;
font-size: 1em;
}
.drop .icon {
height: 80px;
vertical-align: middle;
display: block;
margin: 0 auto;
margin-top: 32px;
}
/* SCALING */
#media only screen and (max-width: 1400px) {
.five-column {
min-width: calc(25% - 20px);
}
.drop .name {
font-size: 1.10em;
}
}
#media only screen and (max-width: 1200px) {
.ad-box {
display: none;
}
.row {
max-width: calc(100% - 14px);
}
.five-column {
min-width: calc(33% - 20px);
}
.drop .name {
font-size: 1.20em;
}
}
#media only screen and (max-width: 1000px) {
.five-column {
min-width: calc(50% - 20px);
}
.drop .name {
font-size: 1.30em;
}
.user-name {
left: 7%;
}
.more-dropup {
left: 5%;
}
.user-image {
left: 2%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
<div class="nav-custom">
<a class="venos_logo" href="hubs.html">
<img src="http://lorempixel.com/50/50">
</a>
<div class="inner-nav">
<ul class="upper-items smooth">
<li class="label">NAVIGATE</li>
<li class="link"><i class="material-icons nav-icon">home</i> Dashboard
</li>
<li class="link"><i class="material-icons nav-icon">notifications</i> Notifications
</li>
<li class="link"><i class="material-icons nav-icon">cloud</i> Synced Files
</li>
<li class="link"><i class="material-icons nav-icon">create</i> Create Hub
</li>
</ul>
<ul class="lower-items">
<li class="label">HUBS</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Jason's Vacation 2016
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> San Haven Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Bismarck Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Fargo Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Velva Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Dank Memes
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Squad
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Summer 2017
</li>
</ul>
<div class="show-hubs btn btn-lg txt-white bg-blue no-border" href="" role="button">Show More</div>
</div>
<div class="nav-push-div"></div>
<div class="more-menu">
<ul>
<li><a class="more-menu-link nonactive txt-blue" href="settings.html">Settings</a>
</li>
<li><a class="more-menu-link nonactive txt-blue" href="signout.html">Signout</a>
</li>
</ul>
</div>
<div class="nav-user">
<div class="user-image"></div>
<span class="user-name">Jason Procka</span>
<button type="button" class="more-dropup">
<i class="material-icons nav-more-btn">more_horiz</i>
</button>
</div>
</div>
<div class="content">
<div class="page-content">
<div class="jumbotron hub-jumbo">
<div class="hub-header">
<div class="container">
<h2 class="txt-white">Jason's Summer Vacation</h2>
<p class="txt-white">There doesn't seem to be a description here!</p>
</div>
</div>
<div class="hub-btns">
<a class="copy-link btn btn-lg btn-wide bg-white txt-blue" href="" role="button">Copy Link</a>
<a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-dark-blue" href="" role="button">Create Drop</a>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="five-column">
<div class="drop">
<div class="name">1.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop drop-image">
<div class="name">2.png</div>
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">3.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">4.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">5.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">6.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">7.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">8.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">9.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">10.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
</div>
<div class="ad-box">
<span class="ad-text">Your ad here.</span>
</div>
</div>
<div class="push-div"></div>
</div>
<div class="drop-details">
<button class="close-details">
<i class="material-icons">close</i>
</button>
</div>
</div>
I tried this code but when i click on the button the content collapses and the button moves down. I want the content to collapse and the button remains at the top inline with the other button.
Here is my HTML and CSS code:
#fixed {
margin-top: 60px;
}
#block {
border: solid #BDC3C7 1px;
width: 360px;
margin-left: 60px;
display: inline-block;
}
.ab {
margin: 5px;
}
#demo {
max-width: 350px;
color: blue;
border: solid #ddd 1px;
padding: 5px 12px 0px 12px;
margin: 2px -10px 2px 0px;
vertical-align: top;
white-space: nowrap;
font-size: 12px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
}
.list {
list-style: none;
border-bottom: solid 1px #eee
}
.as {
margin: 0 0 10px 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
THINK
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>About Us
</li>
<li>Contact Us
</li>
<li>Pricing
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div id="fixed">
<div id="block">
<div class="ab">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse in">
<ul class="as">
<li class="list">hello</li>
<li class="list">hi</li>
<li class="list">hello</li>
</ul>
</div>
</div>
</div>
<div id="block">
<div class="ab">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo1">Simple collapsible</button>
<div id="demo1" class="collapse in">
<ul class="as">
<li class="list">hello</li>
<li class="list">hi</li>
<li class="list">hello</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Give the blocks a vertical align rule.
Also never duplicate an html id. Use classes instead.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<style>
#fixed {
margin-top: 60px;
}
/* Changed to class here */
.block {
border: solid #BDC3C7 1px;
width: 360px;
margin-left: 60px;
display: inline-block;
/* added vertical-align */
vertical-align: top;
}
.ab {
margin: 5px;
}
#demo {
max-width: 350px;
color: blue;
border: solid #ddd 1px;
padding: 5px 12px 0px 12px;
margin: 2px -10px 2px 0px;
vertical-align: top;
white-space: nowrap;
font-size: 12px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
}
.list {
list-style: none;
border-bottom: solid 1px #eee
}
.as {
margin: 0 0 10px 0;
padding: 0;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
THINK
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>About Us
</li>
<li>Contact Us
</li>
<li>Pricing
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div id="fixed">
<!-- changed "block" from id to class here -->
<div class="block">
<div class="ab">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse in">
<ul class="as">
<li class="list">hello</li>
<li class="list">hi</li>
<li class="list">hello</li>
</ul>
</div>
</div>
</div>
<!-- changed "block" from id to class here -->
<div class="block">
<div class="ab">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo1">Simple collapsible</button>
<div id="demo1" class="collapse in">
<ul class="as">
<li class="list">hello</li>
<li class="list">hi</li>
<li class="list">hello</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>