Bootstrap change carousel height
The following should work
.carousel .item {
height: 300px;
}
.item img {
position: absolute;
top: 0;
left: 0;
min-height: 300px;
}
JSFiddle for reference.
How adjust bootstrap carousel height?
Hi you can add this Stylesheet i've tried in your website with inspect element it's worked!
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
.carousel-inner {
height: 400px;
}
.carousel-item, .carousel-item img {
height: 400px;
width:100%;
}
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 767px) {
.carousel-inner {
height: 160px;
}
.carousel-item, .carousel-item img {
height: 160px;
width:100%
}
}
Here is Result
Bootstrap carousel width and height
Are you trying to make it responsive? If you are then I would just recommend the following:
.tales {
width: 100%;
}
.carousel-inner{
width:100%;
max-height: 200px !important;
}
However, the best way to handle this responsively would be thru the use of media queries like such:
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
Modify the height of Bootstrap Carousel control?
To solve this, just modify the properties of .carousel-control-prev
and .carousel-control-prev
in the CSS.
.carousel-control-prev,
.carousel-control-next {
height: 25%;
top: 37.5%;
};
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<body>
<div class="container">
<div class="row">
<div class="col">
<div id="carouselExampleIndicators" class="carousel slide my-4" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://placehold.it/900x350" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/900x350" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/900x350" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
adjust image height in bootstrap carousel when mobile state
You need to remove the vh property and use max-heignt, min-height property and proper media Query ...
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
You need to use max-height and min-height property to .carousel, .carousel-item img
this class. According to device Dimension the image ration should be changed... See the below link, Will get all the codes form here https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Resize carousel bootstrap 4
Short answer:
You forgot to add img-fluid
to your images. Plus, normally you should set carousel width, not height. If you want to set it's height, see Complete answer.
Complete answer:
( You can view working code here : Fiddle )
First, You should add .img-fluid
to your images in carousel, if you want it to be responsive.
Second, Normally you should set width
of carousel in bootstrap. it works as you can see here : Fiddle (But still it's not perfect.)
But if you want to set the height of carousel, you can change some bootstrap styles:
.carousel-item,
.carousel-inner,
.carousel-inner img {
height: 100%;
width: auto;
}
.carousel-item {
text-align: center;
}
then you can set carousel's height :
.carousel {
height: 200px;
}
You can view this here : Fiddle
This will not crop images. if you want images to cover instead (and also cropped), you can use:
.carousel-inner img {
width: 100%;
height: auto;
}
you can see it here: Fiddle
Also , you can use media queries to customize it as well.
And last, you should refrence to jquery and bootstrap.js if you didn't already.
Related Topics
Why Are Not All Flexbox Elements Behaving Like Flexbox Divs
Nth-Child with Mod (Or Modulo) Operator
How Add Class to Parent in Angular Application
Passing CSS Property:Value as SASS Mixin Argument
How to Override Device Pixel Ratio
How to Escape String CSS in SASS/Scss
Remove Underline from Part of a Link
Bootstrap 3 Arrow on Dropdown Menu
Fluid Container in Bootstrap 3
How to Find Unused CSS in a Website
CSS Image Layouting Before Image Loaded
How to Make Text Run Top-To-Bottom in CSS
How to Create Custom Tooltips with CSS Pseudoelements
Keep Width When Using Letter-Spacing on Hover
IE6 "Frame" Layout with 100% Height and Scrollbars
Galaxy S4 Stock Browser CSS3 Border-Radius Support