I have the following structure:
<div class="carousel" id="my-carousel">
<div class="carousel-item">
<div class="text-center">
...
</div>
</div>
<div class="carousel-item">
<div class="text-center">
...
</div>
</div>
<div class="carousel-item">
<div class="text-center">
...
</div>
</div>
</div>
I also have the following script for normalizing the carousel:
function normalizeCarousel() {
function normalize() {
var maxHeight = 0;
$(".carousel-item").each(function() {
var currentHeight = $(this).height();
if (currentHeight > maxHeight) {
maxHeight = currentHeight;
}
});
$("#my-carousel").css("height", maxHeight);
};
normalize();
$(window).on("resize orientationchange", function() {
normalize();
});
}
$(document).ready(function() {
normalizeCarousel();
});
Here is the JSFiddle: JSFiddle
What I'm trying to do is vertically align each text-center div inside the carousel-items. I've tried using flexbox but couldn't manage to make it work!
Thank you in advance!
This is ought to do the trick
.carousel-item {
display: table;
}
.text-center {
display: table-cell;
vertical-align:middle;
}
with flexbox, use something like this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
div.text-center {
position: absolute;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
width: 100%;
color: red;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="text-center">Text Vertically Center Aligned</div>
<img src="la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<div class="text-center">Text Vertically Center Aligned</div>
<img src="chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<div class="text-center">Text Vertically Center Aligned</div>
<img src="ny.jpg" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
Related
I took the documentation from Bootstrap and everything works fine, but I need the logo to be in the center of the carousel, even when the image changes. I've tried with relative parent but it seems like something is off.
<div class="container-fluid g-5">
<div class="row">
<div class="col-12">
<div id="carouselExampleSlidesOnly" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/section1/home-image.jpg" class="d-block img-fluid w-100" alt="...">
</div>
<div class="carousel-item">
<img src="/images/section1/home-img-2.jpg" class="d-block img-fluid w-100" alt="...">
</div>
</div>
<div class="logo">
<img src="/images/section1/home-logo.png" alt="">
</div
</div>
</div>
</div>
</div>
#section .container-fluid{
position: relative;
width: 100%;
height: 85vh;
z-index: 0;
}
#section .logo{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
So if I understood your issue correctly then you only need to use display:flex and center the logo both vertically and horizontally. So here is your code
.carousel {
position: relative; //.logo is inside .carousel
}
.logo {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container-fluid g-5">
<div class="row">
<div class="col-12">
<div id="carouselExampleSlidesOnly" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/section1/home-image.jpg" class="d-block img-fluid w-100" alt="...">
</div>
<div class="carousel-item">
<img src="/images/section1/home-img-2.jpg" class="d-block img-fluid w-100" alt="...">
</div>
</div>
<div class="logo">
<img src="/images/section1/home-logo.png" alt="">
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
I hope this solves your issue. Please run the code on your system because image is missing here.
body{
background-color: #CAF7E3;
}
.container-fluid{
padding: 3% 15%;
}
.navbar{
font-family: 'Montserrat';
font-weight: bold;
}
.navbar-brand{
font-size: 2.5rem;
}
.nav-item{
margin-right: 2rem;
}
#title{
padding: 8% 15%;
background-color: #F8EDED;
}
.slogun{
padding-left: 25px;
font-family: 'Ubuntu';
font-weight: bold;
font-size: 3rem;
}
.img-fruit{
padding-left: 9%;
}
.fruit{
width: 90%;
}
.carousel-inner{
padding: 8% 15%;
}
.unsplash{
object-fit: none;
width: 100%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Grocery Store</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,600;0,700;1,900&family=Ubuntu:ital,wght#0,400;0,500;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrap">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-lg-6 slogun">
Not only an apple but fruits every day keeps the doctor away
</div>
<div class="col-lg-6 img-fruit">
<img class="fruit" src="photos/fruit.png" alt="">
</div>
</div>
</div>
<div class="carousel-item">
<img class="unsplash" src="photos/check.jpg" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Here is slide 2 I took the landscape photo from unsplash.com and used it here but since then when I move from slide 1 to slide 2 the carousel section height increases due to image and also the image doesn't in the width of the carousel-item (the image name in the html is check.png) how can i solve this problem.
You can give fixed height and width to the images as required by the carousel:
<img class="fruit" src="photos/fruit.png" alt="" height="50" width="200" >
(Height and Width are in Pixels.)
i am learning bootstrap 5, i have tried to create simple carousel by following official documentation of Bootstrap 5 Bootstrap 5 Carousel. but when i simply copied their code and used in my template i got unexpected error.my carousel moving full page content instead of his images. Content after Carousel Div also moves when Carousel moves and when i put more div or section on page full page moves along Carousel move. here is my code Codepen Demo
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="icons/fontawesome.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" />
<style>
/*** Slider Box ***/
.sliderbox {
margin-left: 0;
padding: 0;
background-color: yellow;
}
.carousel-inner .carousel-item {
background-color: darkkhaki;
margin: 0;
margin-left: 0;
padding: 0;
}
.carousel-caption {
bottom: 20%;
padding-right: 80%;
width: 25%;
text-align: left;
}
.slider-image-heading {
font-family: Montserrat-Bold;
font-weight: 300;
font-size: xx-large;
color: white;
letter-spacing: 3px;
}
.slider-image-text {
margin-top: 40px;
letter-spacing: 2px;
}
.slider-image-btn {
background-color: #56e0cd;
}
.slider-image-btn:hover {
background-color: black;
color: white;
border-color: white;
}
.carousel-control-prev-icon {
background-color: black;
border-radius: 50%;
}
.getrugdiv {
background-color: #215f6a;
width: auto;
}
</style>
</head>
<body>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/austin-fireworks.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/taj-mahal_copy.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ibiza.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="container-fluid getrugdiv">
<h1> Boot Your Trip Now</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<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://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
</body>
</html>
Here you go...
After a lot of trial and error, I found out that after deleting margin: 0; from .carousel-inner .carousel-item {...} the carousel started working (i.e. white space doesn't appear every time the slide is changed).
So, change this...
.carousel-inner .carousel-item {
background-color: darkkhaki;
margin: 0;
margin-left: 0;
padding: 0;
}
...into this.
.carousel-inner .carousel-item {
background-color: darkkhaki;
margin-left: 0;
padding: 0;
}
See the snippet below.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="icons/fontawesome.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" />
<style>
/*** Slider Box ***/
.sliderbox {
margin-left: 0;
padding: 0;
background-color: yellow;
}
.carousel-inner .carousel-item {
background-color: darkkhaki;
margin-left: 0;
padding: 0;
}
.carousel-caption {
bottom: 20%;
padding-right: 80%;
width: 25%;
text-align: left;
}
.slider-image-heading {
font-family: Montserrat-Bold;
font-weight: 300;
font-size: xx-large;
color: white;
letter-spacing: 3px;
}
.slider-image-text {
margin-top: 40px;
letter-spacing: 2px;
}
.slider-image-btn {
background-color: #56e0cd;
}
.slider-image-btn:hover {
background-color: black;
color: white;
border-color: white;
}
.carousel-control-prev-icon {
background-color: black;
border-radius: 50%;
}
.getrugdiv {
background-color: #215f6a;
width: auto;
}
</style>
</head>
<body>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/austin-fireworks.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/taj-mahal_copy.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ibiza.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="container-fluid getrugdiv">
<h1> Boot Your Trip Now</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<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://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
</body>
</html>
im working with HTML and right now i just added a carousel item to my html project, my question is how can you display the carousel in the middle of the page since it appears at the left side.
www.littlebossworld.com
In this situation you have to use !important attribute because your carousel plugin is adding inline styles (maybe there is a setup where you can change this?).
"hard" css:
.fusion-carousel .fusion-carousel-wrapper {
margin: 0 auto !important;
}
this shows the example
This Code Help for you
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<style>
.corosolstylelog {
margin: 0 auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
margin: 0 auto;
}
</style>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var hight = $(window).height();
var hightforcourosol = ($(window).height() / 4) * 3;
var width = ($(window).width() / 2);
$('.carousel-inner img').css("height", hightforcourosol);
$('.carousel-inner a img').css("height", hightforcourosol);
$('.carousel-inner img').css("width", width);
$('.carousel-inner a img').css("width", width);
})
</script>
</head>
<body>
<div class="col-lg-2">
Left Side
</div>
<div class="col-lg-8 corosolstylelog">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Image/Carousel/a.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="Image/Carousel/b.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="Image/Carousel/c.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2">
Right Side
</div>
</body>
</html>
Hi I have very little coding experience and im very new to this so sorry if this is a silly question. I've been messing around with it but i cant figure out how to stop this code from displaying across all pages:
<!DOCTYPE html>
<html lang="en">
<head>
<body id="imageslide"
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
</style>
</head>
<body>
<div class="container" >
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://d2a2wjuuf1c30f.cloudfront.net/product_photos/41163636/gg_201_original.jpg" alt="Chania" width="980" height="345">
</div>
<div class="item">
<img src="https://d1nr5wevwcuzuv.cloudfront.net/product_photos/40913430/gg1_original.jpg" alt="Chania" width="980" height="345">
</div>
</div>
</div>
</body>
</html>
<br>
<br>
<html>
<body>
<body>
<div class="imageslide">
<div style="background-color:#FFC3C3; color:white; padding:1px; text-align:center;">
<h2>Shop By Category</h2>
</div>
</body>
</html>
<br>
I only want it to display on my websites home page but its appearing on every page. The code is in the layout file as i need it to appear above the page content and sidebar. Im editing the stores html through storenvy if that helps.Is there something i can add to the CSS or html that will stop it coming up on pages other than the homepage. Thanks in advance!
Don't use two <html> tags. A page starts with a <html> and ends with a </html>.
If you want multiple sections on a page just use <div> & </div> for start and end of div.
<!DOCTYPE html>
<html lang="en">
<head>
<body id="imageslide" <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://d2a2wjuuf1c30f.cloudfront.net/product_photos/41163636/gg_201_original.jpg" alt="Chania" width="980" height="345">
</div>
<div class="item">
<img src="https://d1nr5wevwcuzuv.cloudfront.net/product_photos/40913430/gg1_original.jpg" alt="Chania" width="980" height="345">
</div>
</div>
</div>
<div class="imageslide">
<div style="background-color:#FFC3C3; color:white; padding:1px; text-align:center;">
<h2>Shop By Category</h2>
</div>
</div>
</body>
</html>