Bootstrap carousel issue: using arrow navigation doesn't display the second item - javascript

I'm trying to use bootstrap carousel inside CSS flexbox.
My issue is that I made some mistakes in the HTML and the second slide of the carousel doesn't show up. I can use the next button to move from the first slide, but it doesn't display the second and stays blank.
Here's my code:
.news {
display: flex;
height: 600px;
width: 100%;
}
#flex-box-1 {
width: 50%;
height: 100%;
background-color: green;
}
#flex-box-2 {
width: 50%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <meta name="description" content="Unilab career acceleration project" /> -->
<title>UniLab</title>
<script src="https://kit.fontawesome.com/b51b7dd055.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<section class="news">
<div id="flex-box-1">
<div id="places">
<h2>WORLD NEWS</h2>
<hr>
<h2>Amazing places in America to visit.</h2>
<p>For some reason — this country, this city, this neighborhood, this particular street —  is the place you are living a majority of your life in.</p>
<button onclick="location.href = './Desktop 3/main.html';" id="myButton">LEARN MORE</button>
</div>
</div>
<div id="flex-box-2" class="container">
<div id="news-header" class="column">
<div id='box-1'>
<h2>MORE NEWS</h2>
</div>
<div id='box-2'>
<div class="col-6 text-right">
<a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="prev">
<i class="fa-solid fa-angle-left"></i>
</a>
<a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="next">
<i class="fa-solid fa-angle-right"></i>
</a>
</div>
</div>
</div>
<hr>
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="column">
<article class="card">
<h3 class="pink">TRAVEL</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
<article class="card">
<h3 class="pink">TECHNOLOGY</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
</div>
<div class="carousel-item">
<div class="column">
<article class="card">
<h3 class="pink">TRAVEL</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
<article class="card">
<h3 class="pink">TECHNOLOGY</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- <script src="./scripts.js"></script> -->
<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://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Thanks in advance <3


Your carousel-item weren't nested correctly, so when the buttons were triggering the active class change it was applying it to an element that was nested in an element that was no longer visible. When you do these, make sure you check to ensure that your items are inside the carousel-inner or the primary carousel container in whatever framework you use and not inside of each other as you had them initially. If you watch it in the browser inspector, you can see the class change when you use the nav arrows
.news {
display: flex;
height: 600px;
width: 100%;
}
#flex-box-1 {
width: 50%;
height: 100%;
background-color: green;
}
#flex-box-2 {
width: 50%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <meta name="description" content="Unilab career acceleration project" /> -->
<title>UniLab</title>
<script src="https://kit.fontawesome.com/b51b7dd055.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<section class="news">
<div id="flex-box-1">
<div id="places">
<h2>WORLD NEWS</h2>
<hr>
<h2>Amazing places in America to visit.</h2>
<p>For some reason — this country, this city, this neighborhood, this particular street —  is the place you are living a majority of your life in.</p>
<button onclick="location.href = './Desktop 3/main.html';" id="myButton">LEARN MORE</button>
</div>
</div>
<div id="flex-box-2" class="container">
<div id="news-header" class="column">
<div id='box-1'>
<h2>MORE NEWS</h2>
</div>
<div id='box-2'>
<div class="col-6 text-right">
<a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="prev">
<i class="fa-solid fa-angle-left"></i>
</a>
<a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="next">
<i class="fa-solid fa-angle-right"></i>
</a>
</div>
</div>
</div>
<hr>
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="column">
<article class="card">
<h3 class="pink">TRAVEL</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
<article class="card">
<h3 class="pink">TECHNOLOGY</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
</div>
</div>
<div class="carousel-item">
<div class="column">
<article class="card">
<h3 class="pink">TRAVEL</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
<article class="card">
<h3 class="pink">TECHNOLOGY</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- <script src="./scripts.js"></script> -->
<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://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Related

Testimonial slider not responsive

I got a carousal template from getbootstrap.com (bootstrap 4) however, I'm having trouble making the carousal responsive on mobile screens. On smaller screens the text gets cut up and the carousal indicator gets merged with the text, and it only displays two testimonials at a time. I tried to make the testimonials stack on top of each other on smaller screens by using col-sm-12 however its not working.
Css:
width: 100%;
height: 400px;
word-wrap: break-word;
overflow-wrap: break-word;
}
#carouselExampleIndicators .carousel-item .row{
height: 300px;
}
/* testimonial columns */
#carouselExampleIndicators .carousel-item .col{
width: 100%;
margin: 10px;
color: black;
}
/* styling arrows */
#carouselExampleIndicators .carousel-control-prev .fa-chevron-left{
font-size: 30px;
color: black;
}
#carouselExampleIndicators .carousel-control-next .fa-chevron-right{
font-size: 30px;
color: black;
}
/* styling slide indicators */
#carouselExampleIndicators .carousel-indicators li{
background-color: black;
}
/* styling quotations */
#carouselExampleIndicators .fa-solid.fa-quote-left{
font-size: 40px;
padding-bottom: 15px;
}
/* customer review */
#carouselExampleIndicators #testimonial-text{
font-size: 19px;
padding-bottom: 5px;
}
/* name */
#carouselExampleIndicators #testimonial-source .name{
font-size: 20px;
}
/* company */
#carouselExampleIndicators #testimonial-source .company{
font-size: 15px;
font-weight: 500;
color: var(--clr-signode-red);
}
HTML
<div class="container">
<!-- heading -->
<div class="featurette-heading">
<h5 class="sub-heading text-center">Testimonials</h5>
<h2 class="fw-normal lh-1 main-heading text-center">From Our Customers</h2>
</div>
<div class="d-flex justify-content-center">
<div class="divider-dash "></div>
</div>
<!-- end heading -->
</div>
<div class="container-fluid">
<!-- testimonials carousel -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!-- TESTIMONIAL PAGE -->
<div class="carousel-item active">
<div class="carousel-caption">
<div class="row">
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Company Name</div>
</div>
</div>
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Company Name</div>
</div>
</div>
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Company Name</div>
</div>
</div>
</div>
</div>
</div>
<!-- TESTIMONIAL PAGE -->
<div class="carousel-item">
<div class="carousel-caption">
<div class="row align-items-center">
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“When I want quality products, I always go to Signode. Their materials are excellent, their service is great, and their co-op students are the best in the industry.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Signode Canada</div>
</div>
</div>
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“When I want quality products, I always go to Signode. Their materials are excellent, their service is great, and their co-op students are the best in the industry.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Signode Canada</div>
</div>
</div>
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“When I want quality products, I always go to Signode. Their materials are excellent, their service is great, and their co-op students are the best in the industry.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Signode Canada</div>
</div>
</div>
</div>
</div>
</div>
<!-- TESTIMONIAL PAGE -->
<div class="carousel-item">
<div class="carousel-caption">
<div class="row align-items-center">
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“When I want quality products, I always go to Signode. Their materials are excellent, their service is great, and their co-op students are the best in the industry.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Signode Canada</div>
</div>
</div>
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“When I want quality products, I always go to Signode. Their materials are excellent, their service is great, and their co-op students are the best in the industry.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Signode Canada</div>
</div>
</div>
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“When I want quality products, I always go to Signode. Their materials are excellent, their service is great, and their co-op students are the best in the industry.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Signode Canada</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- carousel arrows -->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span><i class="fa-solid fa-chevron-left" aria-hidden="true"></i></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span><i class="fa-solid fa-chevron-right" aria-hidden="true"></i></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
What it looks like on XL screens
What it looks like on mobile

MDL creates additional scrollbars when user resizes browser

When user goes from fullscreen to window view in chrome or any browser. The main class mdl-layout__content seems to add a vertical (up and down) scrollbar, which means there are now two scrollbars on the right side of the users screen.
From what I have read, people are saying it is the footer that causes this issue, however I don't believe that to be the case, as I can do an easy fix by changing MDL css from
.mdl-layout__container {
position: absolute;
width: 100%;
height: 100%;
}
to
.mdl-layout__container {
position: absolute;
width: 100%;
height: auto !important;
}
However this fix is horrible, and means changing the code Google supplies.
Picture of issue:
Browser is full screen
Browser is now in a window and NOT full screen
Code
header.tpl
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-drawer">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">TEST</span></span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample" id="fixed-header-drawer-exp" />
</div>
</div>
<button id="demo-menu-lower-right"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">chat</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-right">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
</div>
</header>
<div class="mdl-layout__drawer">
<div class="mdl-navigation card">
<div class="up background-tint">
<div class="text">
<h2>Russell Harrower</h2>
</div>
<div class="add"><i id="tooltip1" class="fa fa-paw" aria-hidden="true"></i>
<div class="mdl-tooltip" for="tooltip1">Your Pet's</div>
</div>
</div>
<div class="down">
<div>
<p>Followers</p>
<p>26</p>
</div>
<div>
<p>Following</p>
<p>21579</p>
</div>
<div>
<p>Like</p>
<p>976</p>
</div>
</div>
<div class="back">
<p>Users Pets goes here.</p>
</div>
<br>
</div>
<!-- END OF ANIMATED MENU -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
Feed.tpl
{*********************************************************
Multi line comment block with credits block
# author: Harrower.xyz
# maintainer: support#harrower.xyz
**********************************************************}
{* The header file with the main logo and stuff *}
{include file='./tpl-files/header.tpl'}
<div class="mdl-section__centre mdl-grid mdl-cell mdl-cell--12-col">
<div class="
">
<!-- this is the status box -->
<div id="show-dialog" class="mdl-card mdl-cell mdl-cell--8-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp card-height-small">
<div class="mdl-section__centre mdl-grid mdl-cell mdl-cell--12-col">
<div class="mdl-cell mdl-cell--1-col mdl-cell--top">
<div class="card__author">
<img src="http://lorempixel.com/40/40/sports/" alt="user">
</div>
</div>
<div class="mdl-cell mdl-cell--10-col mdl-cell--top">
<div class="mdl-card__title">
<h1 id="what_are_u_up_too" class="mdl-card__title-text">What are you up to?</h1>
</div>
</div>
<div id="tt3" class="icon material-icons">add_a_photo</div>
</div>
</div>
</div>
<!-- end status box -->
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media imgcl">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--accent mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="fa fa-thumbs-o-up"></i></button>
</div>
</div>
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
</div>
</div>
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
<div class="mdl-cell mdl-cell--1-col mdl-cell--top">
</div>
</div>
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
</div>
</div>
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--12-col-tablet mdl-cell--hide-phone mdl-cell--top">
<!-- LOST PET WIDGET -->
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-phone mdl-cell--12-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media imgcl" style="background-image:url('//static.pexels.com/photos/7720/night-animal-dog-pet.jpg');">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text card-lost_header">LOST: MELBOURNE CDB</h1>
</div>
<div class="mdl-card__supporting-text">
<p><b>Name:</b> SAMMY
<br>
<b>Last Seen:</b> 2 Days Ago, Bourke Street
<br>
<b>Kid Friendly:</b> Unsure
</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--accent mdl-js-button mdl-js-ripple-effect">View Pet Profile</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="fa fa-share"></i></button>
</div>
</div>
<!-- LOST PET -->
</div>
</div>
{include file='./tpl-files/footer.tpl'}
footer.tpl
<div id="footer" class="navbar navbar-fixed-bottom">
<nav class="navbar navbar-gray" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-inner">
<div class="navbar-inner">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-left">
<li {if {$smarty.get.t} eq 'faq'}class="active"{/if}>FAQ</li>
<li {if {$smarty.get.t} eq 'tos'}class="active"{/if}>Terms Of Service</li>
<li {if {$smarty.get.t} eq 'privacy'}class="active"{/if}>Privacy</li>
<li {if {$smarty.get.t} eq 'contact'}class="active"{/if}>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li {if {$smarty.get.t} eq 'faq'}class="active"{/if}>- In Loving Memory Of OneSpot</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<script src="{$smarty.current_dir}/javascript/bootstrap.min.js"></script>
</body>
</html>

Solution for the above
Make the Users image smaller - from 330px to 200px;
Come up a with a better menu system for your users: for example - if a user
wants to fav a community group, this menu navigation will continue
to have this issue.
Don't over complicate the navbar.
By doing the above it solved your issue, note any small small screens may still have issues.

Can't get CSS list-group-horizontal to fill container and be centered

I am looking to get a container containing a row and then a list-group-horizontal group of items and ensure that it fills the entire HTML page horizontally, and is centered. Currently, these group items bunch to the left and do not fill the page horizontally until the screen size is very narrow, rescaling to lower width when the page is reduced in width.
Currently the result of the code is the following:
I want category 1, 2 and 3 to fill the page, and adjust when more categories are added.
/*!
* Start Bootstrap - Shop Homepage HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.slide-image {
width: 100%;
}
.list-group-horizontal .list-group-item {
display: inline-block;
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left:-4px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius:0;
border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius:4px;
border-bottom-left-radius:0;
}
.carousel-holder {
margin-bottom: 30px;
}
.carousel-control,
.item {
border-radius: 4px;
}
.caption {
height: 130px;
overflow: hidden;
}
.caption h4 {
white-space: nowrap;
}
.thumbnail img {
width: 100%;
}
.ratings {
padding-right: 10px;
padding-left: 10px;
color: #d17581;
}
.thumbnail {
padding: 0;
}
.thumbnail .caption-full {
padding: 9px;
color: #333;
}
footer {
margin: 50px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!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>Shop Homepage - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<!-- <link href="css/bootstrap.min.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="css/shop-homepage.css" rel="stylesheet">
<link href="css/dropdown.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]-->
</head>
<body>
<!-- Navigation -->
<!-- Support paging via http://www.tutorialspoint.com/php/mysql_paging_php.htm-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">eBuy Platform</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Your Profile
</li>
<li>
<!-- This should be dependent on your user type-->
Your Bids/Your Auctions
</li>
<li>
<!-- This should be depending on user type-->
Submit Auction
</li>
<li>
Logout
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-12" style="padding-top:50px">
<p class="lead">Username</p>
<div class="list-group list-group-horizontal">
Category 1
Category 2
Category 3
</div>
</div>
<!-- End of row of categories-->
</div>
</div>
<!-- Page Content -->
<div class="container">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search for items" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
<div class="form-group">
<label for="contain">Author</label>
<input class="form-control" type="text" />
</div>
<div class="form-group">
<label for="contain">Contains the words</label>
<input class="form-control" type="text" />
</div>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>
</div>
</div>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Start listings of auctions-->
<div class="col-md-9">
<!--
<div class="row carousel-holder" style="padding-top:50px">
<div class="col-md-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img class="slide-image" src="http://placehold.it/800x300" alt="">
</div>
<div class="item">
<img class="slide-image" src="http://placehold.it/800x300" alt="">
</div>
<div class="item">
<img class="slide-image" src="http://placehold.it/800x300" alt="">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
-->
<div class="row" style="padding-top:50px">
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$24.99</h4>
<h4>First Auction
</h4>
<p>Description of product</p>
</div>
<div class="ratings">
<p class="pull-right">15 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$64.99</h4>
<h4>Second Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">12 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$74.99</h4>
<h4>Third Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">31 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$84.99</h4>
<h4>Fourth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">6 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$94.99</h4>
<h4>Fifth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">18 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<!--
<div class="col-sm-4 col-lg-4 col-md-4">
To be filled out
</div>
-->
</div>
</div>
</div>
</div>
<!-- /.container -->
<div class="container">
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

.Here where you have <!--Start listings of auctions--> .col-md-9, change to .col-md-12
Update:
Add to .list-group-horizontal .list-group-item this:
width:33.3%;
text-align:center
Snippet
/*!
* Start Bootstrap - Shop Homepage HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.slide-image {
width: 100%;
}
.list-group-horizontal .list-group-item {
display: inline-block;
width:33.3%;
text-align:center
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left: -4px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius: 4px;
border-bottom-left-radius: 0;
}
.carousel-holder {
margin-bottom: 30px;
}
.carousel-control,
.item {
border-radius: 4px;
}
.caption {
height: 130px;
overflow: hidden;
}
.caption h4 {
white-space: nowrap;
}
.thumbnail img {
width: 100%;
}
.ratings {
padding-right: 10px;
padding-left: 10px;
color: #d17581;
}
.thumbnail {
padding: 0;
}
.thumbnail .caption-full {
padding: 9px;
color: #333;
}
footer {
margin: 50px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- Support paging via http://www.tutorialspoint.com/php/mysql_paging_php.htm-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">eBuy Platform</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Your Profile
</li>
<li>
<!--This should be dependent on your user type-->
Your Bids/Your Auctions
</li>
<li>
<!-- This should be depending on user type-->
Submit Auction
</li>
</ul>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-12" style="padding-top:50px">
<p class="lead">Username</p>
<div class="list-group list-group-horizontal">
Category 1
Category 2
Category 3
</div>
</div>
<!-- End of row of categories-->
</div>
</div>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search for items" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
<div class="form-group">
<label for="contain">Author</label>
<input class="form-control" type="text" />
</div>
<div class="form-group">
<label for="contain">Contains the words</label>
<input class="form-control" type="text" />
</div>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</form>
</div>
</div>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Start listings of auctions-->
<div class="col-md-12">
<div class="row" style="padding-top:50px">
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$24.99</h4>
<h4>First Auction
</h4>
<p>Description of product</p>
</div>
<div class="ratings">
<p class="pull-right">15 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$64.99</h4>
<h4>Second Auction</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">12 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$74.99</h4>
<h4>Third Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">31 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$84.99</h4>
<h4>Fourth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">6 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$94.99</h4>
<h4>Fifth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">18 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<!--
<div class="col-sm-4 col-lg-4 col-md-4">
To be filled out
</div>
-->
</div>
</div>
<!-- /.container -->
<div class="container">
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->

jQuery this and toggle issue

Hi friends I try learning jquery but I get some issues,
red label below picture- when i clicked it toggle is opening but when I clicked second one again first div is opening
my html
<ul class="otel-filtre-fiyat-tab">
<li class="otel-views"><a href="#"><img src="http://anitur.streamprovider.net/images/otel-filtre/d2.png" alt="" class="memnuniyet-durum" />
<strong>88/100</strong>
<span class="otel-goruntuleme">274 Görüntüleme</span>
</a></li>
<li class="otel-prices"><a href="#">
<strong>Tüm Fiyatlar</strong>
<span class="otel-goruntuleme">Size Özel en uygun fiyatlar</span>
</a></li>
</ul>
</div><!--otel filtre ozellikler-->
<div class="clr"></div>
</div><!--otel tek liste-->
<div class="otel-filtre-tab">
<div class="otel-tab-icerik otel-full-detay">
<div class="otel-degerlendirme">
<div class="degerlendirme-baslik">Değerlendirme</div>
<div class="otel-tab-detay">
<div class="degerlendirme-not">
<div class="c100 p85 green">
<span>85%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div><!--dairesel genel değerlendirme-->
</div><!-- degerlendirme not -->
<div class="degerlendirme-yorum">
<div class="yorum-bar">
<div class="yorum-bilgi">
<p>
<span class="otel-yorum-kisi">Hakan2020</span>
<span class="otel-yorum-konum">Denizli,Türkiye</span>
<span class="otel-yorum-tarih">26 Eylül 2015</span>
</p>
</div><!-- yorum bilgi -->
<div class="otel-yorum-profil">
<img src="http://anitur.streamprovider.net/images/otel-filtre/profile.jpg" alt="" />
</div>
<div class="yorum-content">
<h3>“Özellikle, yeme içme kalitesi arayanlar için...”</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque provident accusantium sint tempore! Fugiat debitis maxime eos? Devamını oku</p>
</div>
</div><!-- yorum bar-->
<div class="yorum-bar">
<div class="yorum-bilgi">
<p>
<span class="otel-yorum-kisi">Hakan2020</span>
<span class="otel-yorum-konum">Denizsiz,Türkiye</span>
<span class="otel-yorum-tarih">26 Eylül 2015</span>
</p>
</div><!-- yorum bilgi -->
<div class="otel-yorum-profil">
<img src="http://anitur.streamprovider.net/images/otel-filtre/profile.jpg" alt="" />
</div>
<div class="yorum-content">
<h3>“Özellikle, yeme içme kalitesi arayanlar için...”</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque provident accusantium sint tempore! Fugiat debitis maxime eos? Devamını oku</p>
</div>
</div><!-- yorum bar-->
</div><!-- degerlendirme yorum -->
</div>
<div class="clr"></div>
</div><!-- otel degerlendirme-->
<h3>Genel Değerlendirme</h3>
<div class="otel-genel-degerlendirme">
<div class="tum-degerlendirmeler">
Tüm Değerlendirmeler
<h4>Tüm İzlenimler</h4>
<h4 class="degerlendirme">%77 Çok İyi <span>2524 yoruma göre</span></h4>
</div><!--tum degerlendirmeler-->
<div class="diger-degerlendirmeler">
<ul class="tab-degerlendirme">
<li>%35 Çiftler</li>
<li>%35 Aile</li>
<li>%35 İş Seyahati</li>
<li>%35 Yalnız Gezginler</li>
</ul><!--tab menuler-->
<div class="tab-degerlendirme-icerik">
<div class="tab-filtre-icerik" id="ciftler">
<div class="demo-show2">
<h3>KAHVALTI <span class="accord-progress"></span><span class="mmn-oran">59%</span><span class="span-list">“Kahvaltı İyi”</span><span class="accord-chevron"></span></h3>
<div>Deneme 1 'in içeriği</div>
<h3>KAHVALTI <span class="accord-progress"></span><span class="mmn-oran">59%</span><span class="span-list">“Kahvaltı İyi”</span><span class="accord-chevron"></span></h3>
<div>Deneme 2 'in içeriği</div>
<h3>KAHVALTI <span class="accord-progress"></span><span class="mmn-oran">59%</span><span class="span-list">“Kahvaltı İyi”</span><span class="accord-chevron"></span></h3>
<div>Deneme 3 'in içeriği</div>
</div>
<!--<div id="progressbar-durum">
<div></div>
</div>-->
</div>
<div class="tab-filtre-icerik" id="aile">aile..
%35
</div>
<div class="tab-filtre-icerik" id="is-seyahati">iş seyahati..</div>
<div class="tab-filtre-icerik" id="yalniz-gezginler-bg">yalnız gezginler..</div>
</div><!-- tab icerik kismi-->
</div><!--diger degerlendirmeler-->
</div><!-- otel genel değerlendirme-->
</div><!-- tab icerik-->
<div class="otel-tab-icerik otel-fiyat-detay-icerik">otel içerik 2..</div><!-- tab icerik -->
</div><!-- otel filtre tab -->
toggle.js
$(document).ready(function(){
$(".otel-views a").on("click",function(){
$(".otel-full-detay:first").slideToggle();
return false;
});
});
what was my mistake ?
and codepen link:
http://codepen.io/cowardguy/pen/rxdpLp

You need to use other selector to reach your needed element. First you need to climb up in dom tree with .parent() or similar selector and then go down to your element in dom tree with .children() or .find() or other similar selector.
This is your working example:
$(".otel-views a").on("click",function(){
$(this).parents('.otel-tekli-listeleme').find('.otel-full-detay').slideToggle();
return false;
});
Here's fixed codepen

Cycle jQuery slider plugin not sliding properly

I'm using the Cycle JS 2 jQuery plugin but it doesn't seem to be sliding correctly when clicking the "Prev" or "Next" buttons.
Update: I am trying to get it to slide all 4 sections at once, hence that is why 4 sections using col-sm-3 are contained within each .item block.
CodePen: http://codepen.io/gutterboy/pen/MaZyZx
HTML:
<div id="main-slider" class="slider">
<div class="item row">
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://runnersfeed.com/wp-content/uploads/2011/12/curry.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.newsmax.com/Newsmax/files/44/44b1645b-3804-408d-9c64-f68c8f45bc74.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.interbasket.net/news/wp-content/uploads/Lebron-James-Miami-Heat.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.gannett-cdn.com/-mm-/ac1394dbdcca6a36cbf486633b129cd813095ac3/r=x404&c=534x401/local/-/media/USATODAY/USATODAY/2012/11/26/usp-nba_-san-antonio-spurs-at-toronto-raptors-4_3.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
</div>
<!-- Item Ends -->
<div class="item row">
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://i.usatoday.net/sports/_photos/2011/07/11/NBA-lockout-allows-players-to-look-overseas-9V7G6NL-x-large.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://static6.businessinsider.com/image/5241a14b6bb3f7c368ab8319/nba-players-might-wear-bizarre-nickname-jerseys-in-2013.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://bingemagazine.com/wp-content/uploads/2014/02/BINGEMagazine-DennisRodman.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.gannett-cdn.com/-mm-/ac1394dbdcca6a36cbf486633b129cd813095ac3/r=x404&c=534x401/local/-/media/USATODAY/USATODAY/2012/11/26/usp-nba_-san-antonio-spurs-at-toronto-raptors-4_3.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
</div>
<!-- Item Ends -->
<div class="control">
Prev |
Next
</div>
</div>
CSS:
.slider {
margin: 20px;
}
.content-wrap {
display: block;
//height: 400px;
text-decoration: none;
}
.image {
height: 175px;
overflow: hidden;
img {
height: 100%;
}
}
.details {
padding: 20px 10px;
background-color: #fff;
color: #000;
h4 {
font-size: 18px;
font-weight: bold;
}
.sub-title {
font-size: 16px;
}
.text {
font-size: 14px;
}
}
.control {
padding-top: 50px;
text-align: center;
}
JS:
$(document).ready(function() {
$('#main-slider').cycle({
paused: true,
autoHeight: 'calc',
slides: '> .item',
fx: 'scrollHorz',
next: '.control .next',
prev: '.control .prev',
sync: true
});
});
What am I doing wrong here?
I have a sneaky suspicion it has something to do with using Bootstrap columns on the items inside the slides, but not sure how to fix it.

Categories

Resources