Please help with this code.
I have three items and I want when I press next or previous it passes to an another item but it didn't work it stays fixed at the item 1. I already compared my code with many other codes and it seems to me right.
It's a simple carousel with two buttons next and previous but nothing happened when I press them
'''
<div id="featured-products-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target= "#featured-products-carousel" data-slide-to="0" class="active" ></li>
<li data-target= "#featured-products-carousel" data-slide-to="1" ></li>
<li data-target= "#featured-products-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active image-container">
<div class="carousel-placeholder ">
</div>
<div class="container">
<div class="carousel-caption text-left">
<h2>Product 1.</h2>
<p>Your product description here.</p>
<p>
<a class="btn btn-lg btn-primary" href="#service-1" role="button">
Learn more..
</a>
</p>
</div>
</div>
</div>
<!--item-->
<div class="carousel-item ">
<div class="carousel-placeholder ">
</div>
<div class="container">
<div class="carousel-caption">
<h2>Product 2.</h2>
<p>Your product description here.</p>
<p>
<a class="btn btn-lg btn-primary" href="#service-2" role="button">
learn more..
</a>
</p>
</div>
</div>
</div>
<!--item-->
<div class="carousel-item ">
<div class="carousel-placeholder">
</div>
<div class="container">
<div class="carousel-caption text-right">
<h2>Product 3.</h2>
<p>Your product description here.</p>
<p>
<a class="btn btn-lg btn-primary" href="#service-3" role="button">
Learn more..
</a>
</p>
</div>
</div>
</div>
<!--item-->
<a class="carousel-control-prev" href="#featured-products-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#featured-products-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
<!--carousel-->
'''
[![enter image description here][1]][1]
I'm guessing you are using Bootstrap version 5?
If so, a few things to check:
In the Bootstrap carousel example, the carousel uses data-bs-slide-to = "1" on the next button your one is data-slide-to="1", it's missing the 'bs' and that's the same with data-bs-ride and data-ride.
Check you correctly included the necessary Bootstrap JS file
I'm currently studying Bootstrap 4 and was creating a Bootstrap 4 template for my personal study. However, the following code creates a left to right scrollbar on the website when you look at in the browser.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Practice</title>
<meta name="viewport" content="wdith-device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<style>
.Box{padding: 60px 10px; background: #ddd}
.Box:nth-child(even){background: #eee;}
h1, h2{margin: 30px 0;}
.container-fluid, .container{max-width:1400px;}
.carousel-indicators li {width: 10px; height: 10px; border-radius: 100%;}
/* .navbar-brand{position: relative;}
.custom-nav{position: absolute;}*/
</style>
</head>
<body>
<!-- MODAL POPUP -->
<div class="modal fade" id="modalExample">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title"> Modal Title </h2>
<button class="close" type="button" data-dismiss="modal">X</button>
</div>
<div class="modal-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
</div>
</div> <!-- end .modal-content -->
</div> <!-- end .modal-dialog -->
</div> <!-- end .modal -->
<!-- MODAL END-->
<nav class="navbar navbar-expand-lg navbar-light bg-light row">
<a class="navbar-brand col-1 border border-primary" href="#">Navbar</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse col-11 custom-nav border border-primary" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">Tab 1</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown Tab</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div></li>
<li class="nav-item"><a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Tab 2</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="carousel slide" id="ExampleSlide" data-ride="carousel" data-interval="1000">
<ol class="carousel-indicators">
<li data-target="#ExampleSlide" data-slide-to="0" class="active"></li>
<li data-target="#ExampleSlide" data-slide-to="1"></li>
<li data-target="#ExampleSlide" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="1.png">
<div class="carousel-caption"><h5>Image 1</h5></div>
</div>
<div class="carousel-item">
<img class="w-100" src="2.png">
<div class="carousel-caption"><h5>Image 2</h5></div>
</div>
<div class="carousel-item">
<img class="w-100" src="3.png">
<div class="carousel-caption"><h5>Image 3</h5></div>
</div>
</div>
<a class="carousel-control-prev"href="#ExampleSlide" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next"href="#ExampleSlide" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
<div class="jumbotron jumbotron-fluid row">
<div class="offset-1 col-10">
<h1 class="display-1">Heading 1</h1>
<p class="h1">"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
<p class="lead">Stranded. Yes, she was now the first person ever to land on Venus, but that was of little consequence. Her name would be read by millions in school as the first to land here, but that celebrity would never actually be seen by her. She looked at the control panel and knew there was nothing that would ever get it back into working order. She was the first and it was not clear this would also be her last.</p>
</div>
</div>
<div class='container'>
<!-- ACCORDION -->
<div class="card-group" id="exampleAccordion">
<div class="card">
<div class="card-header text-white bg-primary">
<h3 class="card-title" data-target="#card-1" data-toggle="collapse">Accordion Example 1</h3>
</div>
<div class="collapse" id="card-1">
<div class="card-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
</div>
</div>
</div>
</div>
<!-- ACCORDION END -->
<!-- Accordion은 기본적으로 열리고 닫히는 dropdown과 비슷한 기능을 가진 element라고 보면 된다. -->
<!-- Accordion은 collapse를 사용하여 만든다. -->
<div class="card-deck">
<div class="card">
<div class="card-header text-white bg-primary">
<h1>Heading 1</h1>
</div>
<div class="card-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
<p>Stranded. Yes, she was now the first person ever to land on Venus, but that was of little consequence. Her name would be read by millions in school as the first to land here, but that celebrity would never actually be seen by her. She looked at the control panel and knew there was nothing that would ever get it back into working order. She was the first and it was not clear this would also be her last.</p>
</div>
<div class="card-footer">
<p>More Info</p>
</div>
</div>
<div class="card">
<div class="card-header text-white bg-danger">
<h1>Heading 1</h1>
</div>
<div class="card-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
<p>Stranded. Yes, she was now the first person ever to land on Venus, but that was of little consequence. Her name would be read by millions in school as the first to land here, but that celebrity would never actually be seen by her. She looked at the control panel and knew there was nothing that would ever get it back into working order. She was the first and it was not clear this would also be her last.</p>
</div>
<div class="card-footer">
<p><span data-toggle="modal" data-target="#modalExample">More Info</p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
$(".nav li a").on("click", function(){
$(".nav li a").removeClass("active");
$(this).addClass("active");
});
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
$('.carousel').carousel({
pause: false,
});
</script>
</body>
</html>
I can't find the reason why this might be... Does anybody know why this is happening? I want the web page to be just 100% on the screen, not having to scroll from left to right.
https://jsfiddle.net/8wvszpqa/
*edit: The scrollbar I'm meaning is one the picture below:
I am not sure about your issue but tryin to help. Remove those codes from your script to get rid of the bar.
<div class="container">
<div class="carousel slide" id="ExampleSlide" data-ride="carousel" data-interval="1000">
<ol class="carousel-indicators">
<li data-target="#ExampleSlide" data-slide-to="0" class="active"></li>
<li data-target="#ExampleSlide" data-slide-to="1"></li>
<li data-target="#ExampleSlide" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="1.png">
<div class="carousel-caption">
<h5>Image 1</h5>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="2.png">
<div class="carousel-caption">
<h5>Image 2</h5>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="3.png">
<div class="carousel-caption">
<h5>Image 3</h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#ExampleSlide" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#ExampleSlide" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
Sorry to be a pain. I might have been staring at my code for way to long but I am trying to implement a Bootstrap Carousel into my website that will show 3 and then progress one. I am currently following the code sniper at: https://www.codeply.com/go/EIOtI7nkP8 but can only get it to show one and progress one at a time.
Any help would be most appreciated.
Many thanks,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="keywords" content="THE CARE COMPANY (SW) LTD, home care, care, care company, the, company, jobs, care jobs, TORBAY, DEVON, kingsbridge, totnes, plymouth, Care in Torbay , care Torbay, Care torquay, Torbay care , Care for eldery torbay, Torquay, the care company, home care services, home care medical, come care near me, home care elderly, home care agency, caregiver, home health care, respite care, home health aide, homecare, home care services, health, healthcare, assisted living, caregiver, respite care">
<meta name="description" content="Delivering professional home care & live-in care services. The Care Company provides bespoke respite care, dementia care, Alzheimer's care & much more." class="">
<title>The Care Company (SW) LTD</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles -->
<link href="css/grayscale.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<script>
$('#recipeCarousel').carousel({
interval: 10000
})
$('.carousel .carousel-item').each(function(){
var minPerSlide = 3;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<minPerSlide;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top" style="font-size: 1rem !IMPORTANT">The Care Company (SW) LTD</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Our Expertise
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">How Does Our Care Work</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Our CAREGivers</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Partnerships and professionals</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Our Care Options</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Home Care Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Companionship</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Home Help and Housekeeping</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Personal Care</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Dementia Care Including Alzheimer's desease</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Choosing The Right Care For You</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Advice and Support
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Cost Of Care</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">FAQ'S</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">How To Age Well</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Understanding And Preparing For Home Care</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Choosing The Right Care For You</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Nutrition</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Preventing Hospitalisation</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Community Involvement</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Alzheimers and Dementia Care</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Executive Profile</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Community Involvement</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Awards</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">What People Say About Us</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Why Choose The Care Company (SW) LTD</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Join Our Team
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">#YouCanCare</a>
</div>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#">News & Events</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="contact.php">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="masthead v-header">
<div class="fullscreen-video-wrap">
<video src="video/vid.mp4" autoplay="yes" loop="yes">
</video>
</div>
<div class="header-overlay"></div>
<div class="header-content text-md-center container">
<h1 class="mx-auto my-0 text-uppercase" style="margin-bottom: 2px !IMPORTANT">Welcome To The Care Company (SW) LTD</h1>
<p style="color: white !IMPORTANT">Supporting Independence At Home</p>
<p>Our home care services not only provide you with the care you want, where and when you want it, we strive to keep you in control. It is your decisions, your life, your way.</p>
<h2 class="text-white-50 mx-auto mt-2 mb-5" style="color: white !IMPORTANT"></h2>
<p>Call on: 01548 521789</p>
<a href="#projects" class="btn btn-primary js-scroll-trigger" >Join Our Team</a>
Find Home Care
</div>
</header>
<!-- About Section -->
<section id="about" class="about-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h1 class="text-black mb-4">Supported at home the<img class="img-fluid mb-3 mb-lg-0" src="img/words/you.jpg" width="30%" alt="way you want"></h1>
<p class="text-black" >We understand that home is where you feel the happiest. If you want to stay living comfortably at home, you can live well, your way with The Care Company (SW) LTD.
<br><br>
Home Instead has been at the forefront of specialised home care for the elderly and supporting those being cared for and their families for many years. Founded on personal experience, these family values remain at the core of everything we do 24 years on.
<br><br>
Our award-winning care at home fits around your life - it’s tailored, it’s flexible and it’s adaptable. Whether you’re looking for help getting dressed and showered, help around the house or companionship, Home Instead’s trained CAREGivers are perfectly matched to you.
<br><br>
We believe age should be celebrated and that everybody should be able to live happily, comfortably and independently at home.
<br><br>
Start your Home Instead journey today.
<br><br><br>
Read More
</div>
</div>
<div class="row">
<div class="column">
<h1 class="text-black">Caring</h1>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”</p>
</div>
<div class="column">
<h1 class="text-black">Trustworthy</h1>
<br>
<p class="text-black">– We deliver a high standard of care, with integrity, through people who are passionate about what they do.
<br><br>
– “We are reliable, safe and diligent"</p>
</div>
<div class="column">
<h1 class="text-black">Positive</h1>
<br>
<p class="text-black">– We endeavour to encourage optimism and positive outcomes because we are enthusiastic about what we do.
<br><br>
– “We are pragmatic, tenacious, willing and conscientious”</p>
</div>
</div>
</div>
</section>
<!-- Looking For Staff Section -->
<section id="wjs" class="wjs-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<p class="text-black" style="font-size: 20px">
“ There is a real feeling of assurance that the person you love and care for is being taken care of in your absence. That’s what Home Instead does. My aunt hates to see her CAREGivers go. There are times she probably would like to see them more than me. ’’
<br><br>
Bon Jove - Clients Family
<br><br>
Read more client testimonials:
<br><br>
Testimonials
</div>
</div>
</div>
</section>
<!-- Why Join Us Section -->
<section id="about" class="about-section text-center">
<div class="container">
<h1 class="text-black mb-4">Services</h1>
<div class="row">
<div class="column">
<div class="col-lg-8 mx-auto">
<h2 class="text-black"><img class="img-fluid mb-3 mb-lg-0" src="img/words/rcare.png" width="65%" alt="Respite Care"></h2>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”
</div>
</div>
<div class="column">
<div class="col-lg-8 mx-auto">
<h2 class="text-black"><img class="img-fluid mb-3 mb-lg-0" src="img/words/hcare.png" width="65%" alt="Hourly Care"></h2>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”
</div>
</div>
<div class="column">
<div class="col-lg-8 mx-auto">
<h2 class="text-black"><img class="img-fluid mb-3 mb-lg-0" src="img/words/ccare..png" width="65%" alt="Complex Care"></h2>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”
</div>
</div>
</div>
<h3 class="text-black mb-4">To view all our services please click below:</h3>
All Services<br><br><br><br>
</div>
</section>
<!-- contact us Section -->
<section id="contactUs" class="signup-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8 mx-auto text-center">
<br><br>
<h2 class="text-black mb-5">Contact Us:</h2>
<p>You can either contact us via the form below or by post to: <br>The Care Company (SW) LTD, Little Spires, Totnes, Devon, TQ9 7QE <br> Tel: 01548 521789</p>
<form class="form-inline d-flex" action="contact_post.php"method="post">
<input type="test" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactFN" placeholder="Enter First Name *">
<input type="text" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactLN" placeholder="Enter Last Name *">
<input style="width: 100% !IMPORTANT; margin-top: 30px !IMPORTANT" type="text" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactCN" placeholder="Enter Subject">
<input type="email" style="margin-top: 30px !IMPORTANT" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactE" placeholder="Enter Contact Email Address *">
<input type="number" style="margin-top: 30px !IMPORTANT" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactN" placeholder="Enter Contact Number *">
<textarea style="width: 100% !IMPORTANT; margin-top: 30px !IMPORTANT" type="text" cols="40" rows="5" id="contactM" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactM" placeholder="Let us know how we can help"></textarea>
<br>
<p>By clicking submit I consent to The Care Company (SW) LTD using my data for marketing purposes. I have read and accept the Privacy Policy</p>
<button type="submit" style="margin-top: 20px !IMPORTANT" class="btn btn-primary mx-auto">Submit</button>
</form>
<br>
<br><br>
</div>
</div>
</div>
</section>
<!-- quick page Section -->
<!-- quick page Section -->
<section id="about" class="about-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h1 class="text-black mb-4">Awards & Affiliates</h1>
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=1">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=2">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=3">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=4">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=5">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=6">
</div>
</div>
</div>
</div>
<a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
</a>
</div>
<br><br>
</div>
</div>
</section>
<!-- Footer -->
<!-- Footer -->
<section id="contactUs" class="signup-section">
<footer class="page-footer font-small stylish-color-dark pt-4">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-4 mx-auto">
<!-- Content -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">News & Events</h5>
<div class="container">
<?php
$stmt = $db->query('SELECT postTitle, postSlug FROM blog_posts ORDER BY postID DESC LIMIT 5');
while($row = $stmt->fetch()){
echo '<p>'.$row['postTitle'].'</p>';
}
?>
</div>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Useful Links</h5>
<ul class="list-unstyled">
<li>
Home
</li>
<li>
News & Events
</li>
<li>
Franchise Opportunities
</li>
<li>
About Us
</li>
<li>
Admin Log-in
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Get Started</h5>
<ul class="list-unstyled">
<li>
Home Care Services
</li>
<li>
Book a Consultation
</li>
<li>
Meet the team
</li>
<li>
Jour our team
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Contact Us</h5>
<ul class="list-unstyled">
<li>
<p>The Care Company (SW) LTD
<br>
Little Spires
<br>
Totnes
<br>
Devon
<br>
TQ9 7QE</p>
</li>
<li>
<p>Tel: 01548 521789</p>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<hr>
<!-- Call to action -->
<ul class="list-unstyled list-inline text-center py-2">
<li class="list-inline-item">
</li>
<li class="list-inline-item">
<a href="#projects" class="btn btn-primary js-scroll-trigger" >Join Our Team</a>
Find Home Care
</li>
<hr style="margin-bottom: -30px !IMPORTANT">
</ul>
<!-- Call to action -->
</footer>
<!-- Footer -->
<footer class="bg-white small text-center text-black-50" style="background-color: #862d60 !IMPORTANT; color: white !IMPORTANT">
<div class="container">
<div class="col-md-12 col-xs-12" style=" margin-bottom: 20px !IMPORTANT">
<center>
Site Map | Privacy & Cookies | Terms & Conditions
</center>
</div>
<div class="social d-flex justify-content-center" style=" margin-bottom: 20px !IMPORTANT">
<a href="#" class="mx-2">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-linkedin"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-instagram"></i>
</a>
</div>
Copyright © Your Website 2019
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/grayscale.min.js"></script>
</section>
</body>
</html>
Your script for the Carousel is using jQuery, but it's trying to run before jQuery is loaded by the page. In its current state you need to move the Carousel script to AFTER the jQuery loading.
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="grayscale.min.js"></script>
<script>
$('#recipeCarousel').carousel({
interval: 10000
})
$('.carousel .carousel-item').each(function(){
var minPerSlide = 3;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<minPerSlide;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
Now the jQuery functions correctly and it moving like you desire.
I downloaded the JS and CSS for grayscale and linked to the CDNs of the libraries to confirm this would work for you.
I am working with Bootstrap 4 for the first time in a .NET MVC (Not Core) starter application. Bootstrap version updated to 4.1 within Nuget.
I need to have both a horizontal navbar at the top as well as a vertical navbar (sidebar) on the left side.
The example I have been working off of:
https://getbootstrap.com/docs/4.1/examples/dashboard/
The problem that I am having is that the sidebar only extends down as far as the main page content goes, I have been unable to get it to extend down to 100% of the page. I have tried setting the height manually both on the navbar and sidebar related divs, but it has no effect.
_Layout.cshtml :
<body>
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Integrations
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved reports</span>
<a class="d-flex align-items-center text-muted" href="#">
<span data-feather="plus-circle"></span>
</a>
</h6>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
#RenderBody()
</main>
</div>
</div>
</body>
Index.cshtml:
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p>Learn more »</p>
</div>
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<p>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and gives you full control over markup
for enjoyable, agile development.
</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Get more libraries</h2>
<p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Web Hosting</h2>
<p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
</div>
</div>
How it looks (yellow line represents approx where I would expect the sidebar to extend down to):
that's a bit tricky one...
Bootstrap is using extra CSS to accomplish this Layout. It wouldn't work with Bootstrap only. They added a class ".sidebar":
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100;
padding: 48px 0 0;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
Here's a Code-Pen Example:
https://codepen.io/anon/pen/oRjmBN
I also added a 'overflow-y: auto' in case the content inside the sidebar gets to long.
Hope that helps!
hi Every one would you help me please regarding my project I'm getting frustrating of the error it would not next when I try to click next in
edge browser the carousel would not work its button
you can view this information about the carousel that I have choosen here's the link http://v4-alpha.getbootstrap.com/components/carousel/#carouselprev
<section id ="Carousel">
<div id="carousel-home" class="carousel slide"data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-home" data-slide-to="0" class="active"></li>
<li data-target="#carousel-home" data-slide-to="1"></li>
<li data-target="#carousel-home" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid" src="girl_holdCamera.jpg" alt="woman holding a cannon camera">
<div class = "carousel-caption">
<h3>A woman holding camera</h3>
<p>she is probably holding a cannon camera to take picture</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="heart.jpg" alt="heart forming by thiere hand">
<div class = "carousel-caption">
<h3>Building a heart with Two hands</h3>
<p>they build a heart with the use of thiere hands to keep them promesis</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="Smart-guy-holding-beautiful-girl-in-arms.jpg" alt="guy holding girl in his hand">
<div class = "carousel-caption">
<h3>Guy and Pretty woman hugging for the First time</h3>
<p> They were happy to meet each of them</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-home" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-home" role="button" data-slide= "next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/bootstrap.min.js"></script>