How to turn a container div into content slider - javascript

I'm working with Bootstrap 3 and I have made this div:
<div class="second-para">
<div class="container">
<div class="second-section">
<div class="container mt-2">
<div class="row">
<div class="col-md-3 col-sm-6 section-two-title">
<h1 class="text-center m-0 py-2">
Newest
</h1>
<h1 class="text-center m-0 py-2">
Courses
</h1>
</div>
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7096/people-woman-coffee-meeting.jpg" alt="Photo of sunset">
<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web .</p>
</div>
</div>
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/262550/pexels-photo-262550.jpeg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And the result looks like this:
But as I mentioned out in the image, I need to add two icons at the right and left of the cards in order to browse more courses.
So it would be a dynamic content slider.
But I don't know how to do that, so I would really appreciate if you could help me with this...
And here is also the CSS part:
.second-para{
height:500px;
background-color: #ffcc32 !important;
}
.second-section, .third-section, .fourth-section{
padding-top:100px;
}
.card-section{
border-radius: 2%;
}
.second-section img, .third-section img, .fourth-section img{
height:150px;
width:100%;
}
.second-section .item, .third-section .item, .fourth-section .item{
padding-left:5px;
padding-right:5px;
}
.second-section .item-card, .third-section .item-card, .fourth-section .item-card{
transition:0.5s;
cursor:pointer;
}
.second-section .item-card-title, .third-section .item-card-title, .fourth-section .item-card-title{
font-size:15px;
transition:1s;
cursor:pointer;
}
.second-section .item-card-title i, .third-section .item-card-title, .fourth-section .item-card-title{
font-size:15px;
transition:1s;
cursor:pointer;
color:#ffa710
}
.second-section .card-title i:hover,.third-section .card-title i:hover,.fourth-section .card-title i:hover{
transform: scale(1.25) rotate(100deg);
color:#18d4ca;
}
.second-section .card:hover,.third-section .card:hover,.fourth-section .card:hover{
transform: scale(1.05);
box-shadow: 10px 10px 15px rgba(0,0,0,0.3);
}
.second-section .card-text,.third-section .card-text,.fourth-section .card-text{
height:80px;
}
.second-section .card::before, .card::after,.third-section .card::before,.fourth-section .card::before, .card::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale3d(0, 0, 1);
transition: transform .3s ease-out 0s;
background: rgba(255, 255, 255, 0.1);
content: '';
pointer-events: none;
}
.second-section .card::before,.third-section .card::before,.fourth-section .card::before {
transform-origin: left top;
}
.second-section .card::after,.third-section .card::after {
transform-origin: right bottom;
}
.second-section .card:hover::before, .card:hover::after, .card:focus::before, .card:focus::after,.third-section .card:hover::before {
transform: scale3d(1, 1, 1);
}
.section-two-title, .section-three-title,.section-fourth-title{
padding-top:5%;
}
.section-two-title h1, .section-three-title h1, .section-fourth-title h1{
font-size:30px !important;
}


As mentioned, you can use Bootstrap's Carousel
You need custom code, however, to show multiple cards at once: Bootstrap carousel multiple frames at once
See this CodePly for another example: https://www.codeply.com/p/0CWffz76Q9
/* https://stackoverflow.com/a/20008623 */
let items = document.querySelectorAll('.carousel .carousel-item')
window.addEventListener('resize', initCarousel);
initCarousel();
function initCarousel() {
items.forEach((el) => {
// number of slides per carousel-item
const minPerSlide = getMinSlides();
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
}
function getMinSlides() {
// https://stackoverflow.com/a/8876069
const width = Math.max(
document.documentElement.clientWidth,
window.innerWidth || 0
)
if (width < 576) return 1
if (width < 768) return 2
return 4
}
.second-para {
height: 500px;
background-color: #ffcc32 !important;
}
.second-section,
.third-section,
.fourth-section {
padding-top: 100px;
}
.card-section {
border-radius: 2%;
}
.second-section img,
.third-section img,
.fourth-section img {
height: 150px;
width: 100%;
}
.second-section .item,
.third-section .item,
.fourth-section .item {
padding-left: 5px;
padding-right: 5px;
}
.second-section .item-card,
.third-section .item-card,
.fourth-section .item-card {
transition: 0.5s;
cursor: pointer;
}
.second-section .item-card-title,
.third-section .item-card-title,
.fourth-section .item-card-title {
font-size: 15px;
transition: 1s;
cursor: pointer;
}
.second-section .item-card-title i,
.third-section .item-card-title,
.fourth-section .item-card-title {
font-size: 15px;
transition: 1s;
cursor: pointer;
color: #ffa710
}
.second-section .card-title i:hover,
.third-section .card-title i:hover,
.fourth-section .card-title i:hover {
transform: scale(1.25) rotate(100deg);
color: #18d4ca;
}
.second-section .card:hover,
.third-section .card:hover,
.fourth-section .card:hover {
transform: scale(1.05);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
.second-section .card-text,
.third-section .card-text,
.fourth-section .card-text {
height: 80px;
}
.second-section .card::before,
.card::after,
.third-section .card::before,
.fourth-section .card::before,
.card::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale3d(0, 0, 1);
transition: transform .3s ease-out 0s;
background: rgba(255, 255, 255, 0.1);
content: '';
pointer-events: none;
}
.second-section .card::before,
.third-section .card::before,
.fourth-section .card::before {
transform-origin: left top;
}
.second-section .card::after,
.third-section .card::after {
transform-origin: right bottom;
}
.second-section .card:hover::before,
.card:hover::after,
.card:focus::before,
.card:focus::after,
.third-section .card:hover::before {
transform: scale3d(1, 1, 1);
}
.section-two-title,
.section-three-title,
.section-fourth-title {
padding-top: 5%;
}
.section-two-title h1,
.section-three-title h1,
.section-fourth-title h1 {
font-size: 30px !important;
}
/* More Carousel code */
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* https://stackoverflow.com/a/20008623 */
#media (min-width: 576px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(50%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-50%);
}
}
#media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="second-para">
<div class="container">
<div class="second-section">
<div class="container mt-2">
<h1 class="text-center m-0 py-2">
Newest Courses
</h1>
<div class="row">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7096/people-woman-coffee-meeting.jpg" alt="Photo of sunset">
<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web .</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/262550/pexels-photo-262550.jpeg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7096/people-woman-coffee-meeting.jpg" alt="Photo of sunset">
<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web .</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/262550/pexels-photo-262550.jpeg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7096/people-woman-coffee-meeting.jpg" alt="Photo of sunset">
<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web .</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/262550/pexels-photo-262550.jpeg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>

Related

How to achieve rotating only border and not the icon using CSS

I am trying to rotate my border 135 deg on hover but icon rotate also and i want ONLY the border, i post the code if you can help me i will appreciate it,Thank you!
My html: `
<div class="container-fluid details-section">
<div class="row justify-content-center h-100">
<div class="col-xl-2 my-auto box text-center">
<i class="fa fa-guitar"></i>
</div>
<div class="col-xl-2 my-auto box text-center">
<i class="fa fa-guitar"></i>
</div>
<div class="col-xl-2 my-auto box text-center">
<i class="fa fa-guitar"></i>
</div>
</div>
</div>`
And CSS:
`.details-section{
background-color: rgb(83, 83, 83);
height: 200px;
}
.box i{
font-size: 70px;
border: 2px solid #c49b63;
color: black;
}
.box:hover i{
transform: rotate(135deg);
}
`

Here's an option with reverse transform. I updated the HTML to rotate an inner element instead of the .box itself to separate the bootstrap elements from the rotating elements.
.details-section {
background-color: rgb(83, 83, 83);
height: 200px;
}
.icon-container {
border: 2px solid #c49b63;
transition: 0.5s linear;
}
.box i {
font-size: 70px;
color: black;
transition: 0.5s linear;
}
.icon-container:hover {
transform: rotate(135deg);
}
.icon-container:hover i {
transform: rotate(-135deg);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<div class="container-fluid details-section">
<div class="row justify-content-center h-100">
<div class="col-sm-2 my-auto box text-center">
<div class="icon-container">
<i class="fa fa-guitar"></i>
</div>
</div>
<div class="col-sm-2 my-auto box text-center">
<div class="icon-container">
<i class="fa fa-guitar"></i>
</div>
</div>
<div class="col-sm-2 my-auto box text-center">
<div class="icon-container">
<i class="fa fa-guitar"></i>
</div>
</div>
</div>
</div>

Why jQuery .scroll() method is not working with .addClass() method

I am trying to add a class named .nav-color if window is scrolled greater than or equal to 50px with jQuery (jQuery version 3.6.0).
For that I have crated a .nav-color class and trying to add it to #navigation with jQuery .addClass() method but somehow it is not working.
My jQuery Code:
$(document).ready(function() {
$(body).scroll(function() {
if ($(body).scroll() > 20) {
$("#navigation").addClass("nav-color");
}
else {
$("#navigation").removeClass("nav-color");
}
});
});
Why is that happening? Why the code is not working?
Here is my full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./images/favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
header {
background: linear-gradient(rgba(45, 44, 48, 0.753), rgba(45, 44, 48, 0.753)), url(./images/bg-masthead.jpg);
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
.navbar {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
#header-texts {
height: 90vh;
align-items: center;
margin-top: 60px;
height: 90vh;
}
#header-texts-1 {
font-size: 55px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
#s-5:hover {
border-bottom: 1px solid #f24516;
}
.nav-color {
background-color: #ffffff;
color: black;
}
/* ========================= Responsive ========================= */
#media (max-width: 540px) {
#header-texts-1 {
font-size: 30px;
}
#header-texts-2 {
font-size: 16px;
}
}
#media (min-width: 992px) {
.container {
width: 100vw !important;
}
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navigation">
<div class="container-fluid">
<a class="navbar-brand ms-lg-5" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav me-lg-5" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row text-center" id="header-texts">
<div class="col">
<p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
<hr class="mb-4" style="width: 5%; margin: auto; height: 5px; border: none; color: #ff0000; background-color:#ff0000; opacity: 1;">
<p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<!-- ========================= Section 02 ========================= -->
<div class="sec-2 text-light text-center py-5" style="background-color: #f4623a;">
<p class="display-6">We've got what you need!</p>
<hr class="mb-4" style="width: 5%; margin: auto; height: 3px; border: none; color: #fff; background-color:#fff;
opacity: 1;">
<p class="w-md-50 m-auto">Start Bootstrap has everything you need to get your new website up and running in no time! Choose one of our open source, free to download, and easy to use themes! No strings attached!</p>
<button class="btn mt-4 bg-light text-dark fw-bold" id="header-btn">GET STRATED!</button>
</div>
<!-- ========================= Section 03 ========================= -->
<div class="sec-3 py-5 my-5">
<div class="container text-center">
<h2>At your Service</h2>
<hr class="my-4" style="width: 5%; margin: auto; height: 3px; border: none; color: #f24516; background-color:#f24516;
opacity: 1;">
<div class="row text-center mt-5">
<div class="col-md">
<img src="./images/diamond.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Sturdy Themes</p>
<p>Our themes are updated regularly to keep them bug free!</p>
</div>
<div class="col-md">
<img src="./images/uptodate.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Up to Date</p>
<p>All dependencies are kept current to keep things fresh.</p>
</div>
<div class="col-md">
<img src="./images/globe.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Ready to Publish</p>
<p>You can use this design as is, or you can make changes!</p>
</div>
<div class="col-md">
<img src="./images/heart.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Made with Love</p>
<p>Is it really open source if it's not made with love?</p>
</div>
</div>
</div>
</div>
<!-- ========================= Section 04 ========================= -->
<div class="container-fluid">
<div class="row">
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/1.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/2.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/3.jpg" alt=""></div>
</div>
<div class="row">
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/4.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/5.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/6.jpg" alt=""></div>
</div>
<div class="row py-5" style="background-color: #343a40;">
<div class="col text-center py-5">
<h2 class="text-light">Free Download at Start Bootstrap!</h2>
<button class="btn mt-4 bg-light text-dark fw-bold" id="header-btn">DOWNLOAD NOW!</button>
</div>
</div>
</div>
<!-- ========================= Section 05 ========================= -->
<div class="container text-center py-5 my-5">
<h2>Let's Get In Touch!</h2>
<hr class="my-4" style="width: 5%; margin: auto; height: 3px; border: none; color: #f24516; background-color:#f24516;
opacity: 1;">
<p class="w-50 m-auto">Ready to start your next project with us? Give us a call or send us an email and we will get back to you as soon as possible!</p>
<div class="row w-50 m-auto mt-5">
<div class="col-md">
<img src="./images/phone.png" alt="">
<p>+1 (555) 123-4567</p>
</div>
<div class="col-md">
<img src="./images/email.png" alt="">
contact#yourwebsite.com
</div>
</div>
</div>
<!-- ========================= footer ========================= -->
<div class="container-fluid text-center py-5" style="background-color: #f8f9fa;">
<p class="mb-0">Copyright © 2021 - Dabananda Mitra</p>
</div>
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$(body).scroll(function() {
if ($(body).scroll() > 20) {
$("#navigation").addClass("nav-color");
}
else {
$("#navigation").removeClass("nav-color");
}
});
});
</script>
</body>
</html>

You can use scrollTop in the following way (and detect scroll for window, not body):
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 20) {
$("#navigation").addClass("nav-color");
} else {
$("#navigation").removeClass("nav-color");
}
});
});
Applied to your snippet:
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 20) {
$("#navigation").addClass("nav-color");
} else {
$("#navigation").removeClass("nav-color");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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">
<link rel="icon" href="./images/favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
header {
background: linear-gradient(rgba(45, 44, 48, 0.753), rgba(45, 44, 48, 0.753)), url(./images/bg-masthead.jpg);
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
.navbar {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
#header-texts {
height: 90vh;
align-items: center;
margin-top: 60px;
height: 90vh;
}
#header-texts-1 {
font-size: 55px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
#s-5:hover {
border-bottom: 1px solid #f24516;
}
.nav-color {
background-color: #ffffff;
color: black;
}
/* ========================= Responsive ========================= */
#media (max-width: 540px) {
#header-texts-1 {
font-size: 30px;
}
#header-texts-2 {
font-size: 16px;
}
}
#media (min-width: 992px) {
.container {
width: 100vw !important;
}
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navigation">
<div class="container-fluid">
<a class="navbar-brand ms-lg-5" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav me-lg-5" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row text-center" id="header-texts">
<div class="col">
<p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
<hr class="mb-4" style="width: 5%; margin: auto; height: 5px; border: none; color: #ff0000; background-color:#ff0000; opacity: 1;">
<p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<!-- ========================= Section 02 ========================= -->
<div class="sec-2 text-light text-center py-5" style="background-color: #f4623a;">
<p class="display-6">We've got what you need!</p>
<hr class="mb-4" style="width: 5%; margin: auto; height: 3px; border: none; color: #fff; background-color:#fff;
opacity: 1;">
<p class="w-md-50 m-auto">Start Bootstrap has everything you need to get your new website up and running in no time! Choose one of our open source, free to download, and easy to use themes! No strings attached!</p>
<button class="btn mt-4 bg-light text-dark fw-bold" id="header-btn">GET STRATED!</button>
</div>
<!-- ========================= Section 03 ========================= -->
<div class="sec-3 py-5 my-5">
<div class="container text-center">
<h2>At your Service</h2>
<hr class="my-4" style="width: 5%; margin: auto; height: 3px; border: none; color: #f24516; background-color:#f24516;
opacity: 1;">
<div class="row text-center mt-5">
<div class="col-md">
<img src="./images/diamond.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Sturdy Themes</p>
<p>Our themes are updated regularly to keep them bug free!</p>
</div>
<div class="col-md">
<img src="./images/uptodate.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Up to Date</p>
<p>All dependencies are kept current to keep things fresh.</p>
</div>
<div class="col-md">
<img src="./images/globe.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Ready to Publish</p>
<p>You can use this design as is, or you can make changes!</p>
</div>
<div class="col-md">
<img src="./images/heart.png" alt="">
<p class="fw-bold mt-3 mb-0" style="font-size: 22px;">Made with Love</p>
<p>Is it really open source if it's not made with love?</p>
</div>
</div>
</div>
</div>
<!-- ========================= Section 04 ========================= -->
<div class="container-fluid">
<div class="row">
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/1.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/2.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/3.jpg" alt=""></div>
</div>
<div class="row">
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/4.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/5.jpg" alt=""></div>
<div class="col-md px-0"><img class="w-100" src="./images/portfolio/thumbnails/6.jpg" alt=""></div>
</div>
<div class="row py-5" style="background-color: #343a40;">
<div class="col text-center py-5">
<h2 class="text-light">Free Download at Start Bootstrap!</h2>
<button class="btn mt-4 bg-light text-dark fw-bold" id="header-btn">DOWNLOAD NOW!</button>
</div>
</div>
</div>
<!-- ========================= Section 05 ========================= -->
<div class="container text-center py-5 my-5">
<h2>Let's Get In Touch!</h2>
<hr class="my-4" style="width: 5%; margin: auto; height: 3px; border: none; color: #f24516; background-color:#f24516;
opacity: 1;">
<p class="w-50 m-auto">Ready to start your next project with us? Give us a call or send us an email and we will get back to you as soon as possible!</p>
<div class="row w-50 m-auto mt-5">
<div class="col-md">
<img src="./images/phone.png" alt="">
<p>+1 (555) 123-4567</p>
</div>
<div class="col-md">
<img src="./images/email.png" alt="">
contact#yourwebsite.com
</div>
</div>
</div>
<!-- ========================= footer ========================= -->
<div class="container-fluid text-center py-5" style="background-color: #f8f9fa;">
<p class="mb-0">Copyright © 2021 - Dabananda Mitra</p>
</div>
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

You accidently used the scroll()-trigger instead of the scrollTop()-function
Correct it to
$(document).ready(function() {
$(body).scroll(function() {
if ($(body).scrollTop() > 20) {
$("#navigation").addClass("nav-color");
}
else {
$("#navigation").removeClass("nav-color");
}
});
});

How to get a bootstrap card to flip and stay flipped using css and javascript?

I am using Vue, css and JavaScript. I am able to get a specific card to flip when a I hold down the button, but the desired behavior would be that when pressing the button (not holding) the card would flip and reveal the back of the card, then from the back pressing the button you can flip the card again to the front. I've tried implementing this feature with Vue and css only but I could not accomplish it, so I decided to use vanilla Javascript and use onclick event. I have gut feeling that it's my css that's causing this issue but I've experimented quite a bit and can't figure it out. Help or recommendations would be appreciated, only looking to use Vue, vanilla JavaScript, and css. I am sorta new to Vue and css animations/transitions.
new Vue({
el: "#CardsApp",
data: {
cards: [],
isFetchingData: false
},
created: function() {
this.isFetchingData = true;
let vm = this;
axios.get("http://localhost:52007/api/cards")
.then(response => {
vm.cards = response.data.slice()
vm.isFetchingData = false;
})
}
})
.card-title {
font-family: getSchwifty, sans-serif;
font-size: 1.6rem;
color: greenyellow;
text-align: center;
}
.card-text {
font-size: 1.2rem;
}
#loadingImg {
margin-bottom: 30vmin;
}
.card-flip {
-webkit-perspective: 1000px;
perspective: 1000px;
}
.card-flip:active .flip, .card-flip.active .flip {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-flip,
.front,
.back {
width: 100%;
height: 38rem;
}
.flip {
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<div id="CardsApp" v-cloak>
<div class="container">
<img id="loadingImg" v-if="isFetchingData" src="../../images/loading.gif" class="img-fluid mx-auto d-block" alt="Loading" />
</div>
<section>
<div class="container">
<div class="row">
<div v-for="card in cards" class="col-sm-6 col-lg-4">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card border-success text-white bg-dark mb-5" style="max-width: 20rem;">
<img class="card-img-top" src="/images/SquanchyCardLogo.jpg" alt="Card image cap" style="display: block;" data-holder-rendered="true">
<div class="card-body">
<h5 class="card-title text-center">Cards For Squanchies</h5>
<p class="card-text text-center" style="min-height: 7rem">{{card.frontText}}</p>
</div>
<div class="card-footer">
<small class="text-muted">Card No. {{card.id}}</small>
<button onclick="isFlipped()" type="button" class="btn btn-outline-warning btn-sm float-right">Flip this biaatch back!</button>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card border-success text-white bg-dark mb-5" style="max-width: 20rem;">
<img class="card-img-top" src="/images/SquanchyCardLogo.jpg" alt="Card image cap" style="display: block;" data-holder-rendered="true">
<div class="card-body">
<h5 class="card-title text-center">Cards For Squanchies</h5>
<p class="card-text text-center" style="min-height: 7rem">{{card.backText}}</p>
</div>
<div class="card-footer">
<small class="text-muted">Card No. {{card.id}}</small>
<button onclick="isFlipped()" type="button" class="btn btn-outline-warning btn-sm float-right">Flip this biaatch back!</button>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</section>
<!-- CardsApp ends-->
</div>
<script type="text/javascript" src="~/Scripts/vue.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="../../Vue/vue-cards.js"></script>
<script type="text/javascript">
function isFlipped() {
document.querySelector(".card-flip").classList.toggle("flip");
console.log('Inside isFLipped function')
}
</script>

How to run every slide in carouse Bootstrap? [duplicate]

This question already has answers here:
Bootstrap: Slide only one image among the multiple images in an item of the carousel
(2 answers)
Closed 6 years ago.
I'm developer back-end and not have experience about front-end, but current I have a problem with Bootstrap.
I found an example of carousel slider in BootstrapSnip.
It only skips one image when to click next button.
I want it to skip all image in a row.
In comment, it suggests:
// for every slide in the carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
But I don't know this mean. Can anyone help me how to do it?
Thanks.
To easy look please view my pen at:
codepen.io/r0ysy0301/pen/EgPXXY?editors=1010
Or you can see code at bellow:
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
interval: false
});
// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
.multi-item-carousel .carousel-inner > .item {
-webkit-transition: 500ms ease-in-out left;
transition: 500ms ease-in-out left;
}
.multi-item-carousel .carousel-inner .active.left {
left: -33%;
}
.multi-item-carousel .carousel-inner .active.right {
left: 33%;
}
.multi-item-carousel .carousel-inner .next {
left: 33%;
}
.multi-item-carousel .carousel-inner .prev {
left: -33%;
}
#media all and (transform-3d), (-webkit-transform-3d) {
.multi-item-carousel .carousel-inner > .item {
-webkit-transition: 500ms ease-in-out all;
transition: 500ms ease-in-out all;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-transform: none!important;
transform: none!important;
}
}
.multi-item-carousel .carouse-control.left,
.multi-item-carousel .carouse-control.right {
background-image: none;
}
body {
background: #333;
color: #ddd;
}
h1 {
color: white;
font-size: 2.25em;
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
text-shadow: 0px 2px 0px #000000;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>Use Bootstrap's carousel to show multiple items per slide.</h1>
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>

See the codepen Just you have to do some changes in the markup.
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
interval: false
});
// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
.multi-item-carousel .carousel-inner > .item {
-webkit-transition: 500ms ease-in-out left;
transition: 500ms ease-in-out left;
}
.multi-item-carousel .carousel-inner .active.left {
left: -33%;
}
.multi-item-carousel .carousel-inner .active.right {
left: 33%;
}
.multi-item-carousel .carousel-inner .next {
left: 33%;
}
.multi-item-carousel .carousel-inner .prev {
left: -33%;
}
#media all and (transform-3d), (-webkit-transform-3d) {
.multi-item-carousel .carousel-inner > .item {
-webkit-transition: 500ms ease-in-out all;
transition: 500ms ease-in-out all;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-transform: none!important;
transform: none!important;
}
}
.multi-item-carousel .carouse-control.left,
.multi-item-carousel .carouse-control.right {
background-image: none;
}
body {
background: #333;
color: #ddd;
}
h1 {
color: white;
font-size: 2.25em;
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
text-shadow: 0px 2px 0px #000000;
}
<div class="container">
<div class="col-xs-12">
<h1>Use Bootstrap's carousel to show multiple items per slide.</h1>
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
</div>
<!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
</div>
</div>

See this link http://www.bootply.com/89193 and this one http://www.bootply.com/92514
I hope you will find something useful

Checkout this ink
https://getbootstrap.com/examples/carousel/
goto to this and do inspect elements and you can find carousel slider.
In your code please checkout that you have linked JS and CSS to html file.

Bootstrap columns display different in Firefox

I am having a issue with Bootstrap in Firefox. My columns are set correctly in Chrome, Opera and Safari, but not in Firefox.
I created ten boxes distributed in two rows. Five in each row. These boxes has classes .col-sm-2 and .col-xs-10, besides a class called .categoria.
<div class="container categorias">
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="img/corneta.png" alt="corneta">
<p>Novidades</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/contribua.png" alt="contribua">
<p>Contribua</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/nota.png" alt="nota">
<p>Sua Nota é Um Show</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/parceiros.png" alt="parceiros">
<p>Parceiros</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/projetos.png" alt="projetos">
<p>Projetos</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="img/historico.png" alt="historico">
<p>Histórico</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/objetivos.png" alt="objetivos">
<p>Objetivo, Missão, <br> Valores</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/relatorios.png" alt="balancetes">
<p>Balancetes</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/diretoria.png" alt="diretoria">
<p>Diretoria</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/estatuto.png" alt="estatuto">
<p>Estatuto</p>
</div>
</div>
</div>
</div>
In Chrome, Opera and Safari, they appear correctly:
Screenshoot from Chrome
But in Firefox, it is completely irregular.
Screeshoot from Firefox
Note that I am using JQuery to set these boxes max-height so they will never have the height bigger than the width. I using the following code:
$(document).ready( function(){
var columnWidth = $('.categoria').innerWidth();
$('.categoria').css('max-height', columnWidth);
});
And here is the css:
.categoria{
transition: background-color 0.5s linear, box-shadow 0.5s linear;
background-color: #76C6C5;
height: 140px;
margin-left: 1%;
margin-right:1%;
margin-bottom: 20px;
text-align: center;
cursor: pointer;
display: table;
}
.categoria img{
padding-top: 15%;
height: 50%;
display:block;
margin-left: auto;
margin-right: auto;
}
.categoria.col-sm-2 > p{
font-size: 14px;
padding-top: 10px;
}
#media(max-width: 768px){
.categoria{
vertical-align: middle;
height: 8em;
}
.categoria.col-sm-2 > p{
font-size: 1.5em;
display: table-cell;
vertical-align: middle;
}
.categoria img{
display: none;
}
}
.col-xs-offset-1{
padding-left: 15px;
}
To be honest, I am not even sure if it is a problem with Bootstrap. But I don't know what else could be.

Ok so you should change display to table only when you don't want to show image :) that seems to resolve issue with uneven heights
CSS:
.categoria{
transition: background-color 0.5s linear, box-shadow 0.5s linear;
background-color: #76C6C5;
height: 140px;
margin-left: 1%;
margin-right:1%;
margin-bottom: 20px;
text-align: center;
cursor: pointer;
display: block;
}
.categoria img{
padding-top: 15%;
height: 50%;
display:block;
margin-left: auto;
margin-right: auto;
}
.categoria.col-sm-2 > p{
font-size: 14px;
padding-top: 10px;
}
#media(max-width: 768px){
.categoria{
vertical-align: middle;
height: 8em;
display:table;
}
.categoria.col-sm-2 > p{
font-size: 1.5em;
display: table-cell;
vertical-align: middle;
}
.categoria img{
display: none;
}
}
.col-xs-offset-1{
padding-left: 15px;
}
HTML :
<div class="container categorias">
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="corneta">
<p>Novidades</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="contribua">
<p>Contribua</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="nota">
<p>Sua Nota é Um Show</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="parceiros">
<p>Parceiros</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="projetos">
<p>Projetos</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="historico">
<p>Histórico</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="objetivos">
<p>Objetivo, Missão, <br> Valores</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="balancetes">
<p>Balancetes</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="diretoria">
<p>Diretoria</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="estatuto">
<p>Estatuto</p>
</div>
</div>
</div>
</div>
Fiddle

Try to use a constant value instead of a variable and intead of max-height property use height.
$(document).ready( function(){
// This value v
var columnWidth = $('.categoria').innerWidth();
columnWith = constant;
// This also change
$('.categoria').css('height', columnWidth);
});
If this doesn't change anything check all your tags matches. I can't tell you how many times it has happened to me when I don't close tags.
Hope I help.

Categories

Resources