My code is as shown below:
index.html
html,
body {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
}
.container {
width: 100vw;
height: 100vh;
background-color: #fc2;
}
/*.container .carousel slide .carousel-inner .item active {
width: 100vw;
height: 100vh;
}*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="../test/images/slider1.png" alt="Los Angeles" style="
height:100vh;width:100vw;background-color:red;">
</div>
<div class="item">
<img src="../test/images/slider-2.png" alt="Chicago" style="
height:100vh;width:100vw;background-color:green;">
</div>
<div class="item">
<img src="../test/images/slider-3.png" alt="New york" style="
height:100vh;width:100vw;background-color:yellow;">
</div>
</div>
</div>
</div>
Here , I have tried to even give margin:0,padding:0, but still there is some margin on left and right side ,so should I remove or add anything to make it work? I have even tried to remove margin from every component using * . But still it did not give me the same effect.
As you're using Bootstrap, the .container class has padding-left: 15px & padding-right: 15px styles.
Just set padding: 0 to your .container class and it's all done.
However, be careful that in the screenshot below, you can see that bootstrap is loaded after your css. So if you just add padding: 0 to your .container class it will be overrided by bootstrap's.
Try changing the order of stylesheets loading in your <head> so
yours is loaded last.
Or just put a style attribute with padding: 0 directly to your container <div>, but that's not best practice.
Result:
Take a look at your CSS, you have paddings in your .container class located at https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css, precisely
.container{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Just workaround those lines by overriding them if you really need to use Bootstrap.
Another solution is to use a local instance of that CSS code but customized by you, so just save the CSS file, remove those lines and use that CSS locally.
Related
current state of my carousel
I'm trying to code the slide carousel of my website, so no matter what image I upload for the slides, images will always be centered no matter what(currently only centers image if it is a specific resolution).
I have tried calling the class in CSS and centering the margin that way, but its still not working. Here is my code so far:
I called specific slide item class in CSS, updated margin, image still not centered.
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
.carousel-control>.fa {
font-size: 40px;
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
margin-top: -20px;
}
.item {
margin: 0px auto; // center
width: 1100px;
height: 500px;
text-align: center;
}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="https://thumbs.gfycat.com/ShallowRawCockatoo-size_restricted.gif" alt="First slide" text-align="center">
</div>
<div class="item">
<img src="https://thumbs.gfycat.com/ShallowRawCockatoo-size_restricted.gif" alt="Second slide" text-align="center">
</div>
<div class="item">
<img src="https://thumbs.gfycat.com/ShallowRawCockatoo-size_restricted.gif" alt="Third slide" text-align="center">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="fa fa-angle-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="fa fa-angle-right"></span>
</a>
</div>
First of all, you have an invalid CSS comment, that might cause some trouble as well, the right way to comment in CSS is using /* comment */
Next, lets take a look at your attemp of centering things
.item {
margin: 0px auto; /* center */
width: 1100px;
height: 500px;
text-align: center;
}
In theory, this would work, but we need to know what we are centering, which is in this case the whole slide, not its contents (which you probably want to center)
So the quickest solutions here might be the following
.item img {
margin: 0 auto;
}
This is the same way as you tried, but applied on the correct element that needs to be centered -> the content of your slide.
More 'robust' way of centering would be setting your slide to display: flex and using flexbox to center your stuff.
Try it this way
.item {
width: 1100px;
height: 500px;
display: flex;
justify-content: center; /* horizontal centering */
align-items: center; /* vertical centering */
}
Try those out and let me know!
I'm new in HTML, CSS, and Bootstrap and I'm trying to create a carousel for my page.
The carousel is working, but the images are not fitting to the page. The size is too big (height and width) and I'm trying to fit but it's not working properly.
My codes are:
.carousel-inner img{
width:100%;
height: 40%;
}
.carousel-caption {
position: absolute;
top: 60%;
transform: translateY(-60%);
}
.carousel-caption h1{
font-size:470%;
text-transform: uppercase;
text-shadow:3px 3px 15px #000;
}
.carousel-caption h3{
color: #ffc107;
font-size: 200%;
font-weight: 500;
text-shadow: 3px 3px 10px #000;
padding-botton: 1rem;
}
<!-- Image slider -->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class= "carousel-indicators">
<li data-target= "#slides" data-slide-to= "0" class="active"></li>
<li data-target= "#slides" data-slide-to= "1"></li>
<li data-target= "#slides" data-slide-to= "2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/home/susy/Desktop/GIT/vegan-/imagens/feijuca6.jpg">
<div class="carousel-caption">
<h1 class="display-2"> Have you ever tried?</h1>
<h3> Discover the authentic flavour</h3>
<br>
<button type="button" class= "btn btn-outline-light btn-lg"> Click Here</button>
</div>
</div>
<div class="carousel-item">
<img src="/home/susy/Desktop/GIT/vegan-/imagens/pudim.jpg">
</div>
<div class="carousel-item">
<img src="/home/susy/Desktop/GIT/vegan-/imagens/meal.jpg">
</div>
</div>
The first is the CSS (I'm using CSS 3) and the second is the HTML. I'm also using Bootstrap 4.
Does anyone know what am I missing or doing wrong? Or how can I change the sizes to fit the carousel? Please.
As per my knowledge use
.carousel-inner img{
max-width:100%;
height: auto;
display: block;
}
instead of using
.carousel-inner img{
width:100%;
height: 40%;
}
if you want absolute height you can specify height : 300px
.carousel-inner img{
max-width:100%;
height: 300px;
object-fit: cover;
object-position: center;
}
What I think you are searching for is adding class="d-block w-100" in your image tag.
I have been taking a few online classes and tutorials to better understand how to create websites using html/css and bootstrap in particular.
However one problem I have been unable to overcome is - I’m unable to make a carousel caption responsive - it just will not react to the resizing of a window.
HTML:
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="0"></li>
<li data-target="#slides" data-slide-to="0"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="IMG/TEAL ORIGAMI.jpeg">
<div class="carousel-caption">
<h1 class="display-2">ICE3DESIGN</h1>
<h3>Bespoke Web Design</h3>
<button type="button" class="btn btn-outline-light btn-lg">VIEW PORTFOLIO</button>
<button type="button" class="btn btn-primary btn-lg">ENQUIRE NOW</button>
</div>
</div>
<div class="carousel-item">
<img src="IMG/background2.png">
</div>
<div class="carousel-item">
<img src="IMG/background3.png">
</div>
</div>
CSS:
.carousel-inner img {
width: 100%;
height: 100%;
}
.carousel-caption {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel-caption h1 {
font-size: 500%;
text-transform: uppercase;
text-shadow: 1px 1px 10px #000;
}
.carousel-caption h3 {
font-size: 200%;
font-weight: 500;
text-shadow: 1px 1px 10px #000;
padding-bottom: 1rem;
}
I expect that the caption resize accordingly and appear in the centre of the carousel image, however what actually happens is when the browser is resized the caption stays the same size and is far too large and not centered.
So far, you haven't provided a link to the live site, which makes things a bit more difficult. However, I did notice a few things for testing your code.
Consider adding a rule for to make carousel items flex containers:
.carousel-item {
display: flex;
flex-direction: column;
justify-content: center;
}
Remove translation for carousel-captions. Because the sibling image is absolutely positioned (not shown), you'll have to leave absolute positioning here as well. Maybe a background-image would make life easier, though.
.carousel-caption {
position: absolute;
/* top: 50%; */
/* transform: translateY(-50%); */
}
With these rules in place, you'll at least achieve vertical centering of the .carousel-caption. Then you could add the appropriate #media queries to deal with the font overflowing the box (because the container is absolutely positioned).
jsFiddle
i'm making site start with navbar fixed-top then slider has h1 and p tags no images so i'm giving the slides class named .item and giving this class padding:400px 0; to give me big nice header and i'm using background-image property for the whole slider with large screen all works fine but on smaller screens i get big space between the h1 and the navbar also between h1 and the carousel-indicators i'v searched and tried to remove the padding and margin on #media(max-width:750px) and #media(max-width:480px) but it didn't work so how i can losse this padding ?
#media (max-width:750px){
#slider .container #mycarousel .carousel-inner .item{
padding:0;
margin:0;
}
}
#media (max-width: 480px){
#slider .container #mycarousel .carousel-inner .item{
padding:0;
margin:0;
}
}
/* Slider */
#slide{
background-image: url(../img/header.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.item{
color:#fff;
padding:400px 0;
}
<section id="slide" class="text-center">
<div class="container">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<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>
</ol>
<div class="carousel-inner">
<div class="item active">
<h1>Let's Make Business Look Better</h1>
<p>And The Shape Of Work Is Only The Stylish Shape</p>
<button type="button" class="btn btn-success">I Smell Success</button>
</div>
<div class="item">
<h1>Let's Make Business Look Better</h1>
<p>And The Shape Of Work Is Stylish</p>
<button type="button" class="btn btn-success">Take Me There</button>
</div>
<div class="item">
<h1>Let's Make Business Look Better</h1>
<p>And The Shape Of Work Is Stylish</p>
<button type="button" class="btn btn-success">Let's Do It</button>
</div>
</div>
</div>
</div>
</section>
You have a typo, it should be #slide not #slider, because of this the .item element is never targeted.
#media (max-width:750px) {
// this should be #slide, not #slider
#slide .container #mycarousel .carousel-inner .item {
padding:0;
margin:0;
}
}
#media (max-width: 480px) {
// this should be #slide, not #slider
#slide .container #mycarousel .carousel-inner .item {
padding:0;
margin:0;
}
}
Hope this helps.
I have seen a lot of similar questions, but the solutions did not apply.
I am trying to make a Bootstrap carousel such that when the window is resized, the image remains centered while also maintaining the required image height and minimum 100% width properties.
This is a little difficult to explain, but you can see a similar concept on http://www.lyft.com
I have replicated a similar issue on codepen which you can see, that if you shrink the window down to the size of a mobile device the image remains fixed and ultimately you're looking at the top left corner of the image (usually clouds or some unrecognizable blur).
I'm trying to have this image move left and remain centered as the horizontal view shrinks so that the image remains relevant.
My additional carousel styles:
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
overflow: hidden;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: relative;
top: 0;
left: 0;
min-width: 100%;
max-width: none;
height: auto;
}
.carousel-inner img{
margin: auto;
}
#mycarousel{
position: relative;
top: 0;
}
And the simple carousel:
<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>
<li data-target="#mycarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://unsplash.it/2000/1250?image=397" data-color="lightblue" alt="First Image">
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=689" data-color="firebrick" alt="Second Image">
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=675" data-color="violet" alt="Third Image">
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=658" data-color="lightgreen" alt="Fourth Image">
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=638" data-color="tomato" alt="Fifth Image">
</div>
</div>
</div>
I made a solution based on the lyft site you linked in your post. I turned your img into div and used a background image then styled appropriately.
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=397');" data-color="lightblue" alt="First Image"></div>
</div>
<div class="item">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=689');" data-color="firebrick" alt="Second Image"></div>
</div>
<div class="item">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=675');" data-color="violet" alt="Third Image"></div>
</div>
<div class="item">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=658');" data-color="lightgreen" alt="Fourth Image"></div>
</div>
<div class="item">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=638');" data-color="tomato" alt="Fifth Image"></div>
</div>
Then removed this .carousel-inner > .item > img and added this CSS:
.carousel-inner .item .item-child {
background-position: top center;
background-size: cover;
position: absolute;
bottom:0;
top: 0;
left: 0;
right:0;
width: 100%;
height: auto;
}
You can see the js.fiddle here if you want to play around with it. Hope that helps.
There you go, Easiest fix
instead of min-width use width on images
.carousel-inner > .item > img {
position: relative;
top: 0;
left: 0;
width: 100%;
max-width: none;
height: auto;
}
also throw in a height adjustment for carousel like this
.carousel .item {
height: auto;
background-color: #777;
}
http://codepen.io/Rohithzr/pen/WwEpgp?editors=1100