The problem is shown in this GIF:
https://gifyu.com/image/B5nC
I'm using Bootstrap 5 to have a carousel inside a card. Although the images are shown properly, the card resizes as the images change. I want to prevent that and have a constant size for all the images.
Here's the relevant code:
<div class="col">
<div class="card h-100">
<div class="card-img-top w-100">
<div id="carouselExampleControls" class="carousel slide >
<div class="carousel-inner">
<div class="carousel-item active
<img src="1.png" class="d-block w-100 " alt="..." >
</div>
<div class="carousel-item active
<img src="2.png" class="d-block w-100 " alt="..." >
</div>
<div class="carousel-item active
<img src="3.png" class="d-block w-100 " alt="..." >
</div>
</div>
<Button stuff, not so important...>
</div>
</div>
<div class="card-body">
<h5 class="card-title">a title</h5>
<p class="card-text">Some text.</p>
</div>
<div class="card-footer">
Some Text here.
</div>
</div>
</div>
Any ideas?
What you'd want to do, is add a fixed height or width to the image.
Add some css to the img tag. With that you can adjust the height of the image and center the image.
Something like so:
.carousel img {
height: 220px;
width: 100%;
object-fit: cover;
object-position: center;
}
The object-fit: cover; makes it so that the image will fit and not being stretched out. With object-position: center; it centers the image of the view. In this case it centers image on the height of 220px.
Here's a working example: https://www.codeply.com/p/y86ZKljAZS
Media Query for bootstrap 4, unresponsive. I have two cards side by side in a section. When I get down to 576px I want to be able to display the cards side by side.
I've tried setting the parent containers to float: none and float: left. Also tried incorporating display: block on the Query.
<section id="recipeList">
<div class="recipeName"></div>
<div class="row">
<div class="col-sm-6">
<div class="card image-container">
<img class="card-img-top" src="./assets/images/Dish.svg"
alt="places restaurants png">
<div class="card-body ingredients" id="foodImage">
<p class="card-text"></p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card ingredients-card">
<img class="card-img-top"
src="./assets/images/Contents.svg" alt="places restaurants png">
<div class="card-body overflow-auto">
<h2 class="card-title"></h2>
<p class="card-text overflow-auto" id="facts"></p>
</div>
</div>
</div>
</div>
</section>
I would love for the two bootstrap cards to be responsive rather than just squeezing downwards
I'm struggling with making the image on the right stretch to full width in a moment when you'll make the screen size smaller so it transitions to mobile view.
Is there any other class in bootstrap that would do similar work that "img-fluid" does but display image full width when it goes below the text in bootstrap grid system?
<div class="row">
<div class="col-md-6 d-flex">
<div class="align-self-center">
<p class="lead font-weight-bold">sometext</p>
</div>
</div>
<div class="col-sm-6">
<img class="img-fluid" src="someimage.jpg">
</div>
</div>
Here is my fiddle: http://jsfiddle.net/x1hphsvb/2220/
To see what I mean simply lower the width of display window. Image goes below the text and fills only half of the div when I want it to fill it fully and behave as it does right now before the transition.
Both the columns should have the same breakpoint (ie; md/sm) so that they become full-width at the same time...
<div class="row">
<div class="col-md-6 d-flex">
<div class="align-self-center">
<p class="lead font-weight-bold">sometext</p>
</div>
</div>
<div class="col-md-6">
<img class="img-fluid" src="someimage.jpg">
</div>
</div>
http://jsfiddle.net/dwnu5zjq/
I´m a designer with some coding skills, but far from being a programmer. Currently I´m working in a website based on a Bootstrap template, doing good enough except an issue that is driving me nuts: apparently Bootstrap´s CSS is overriding the site CSS, adding a fixed head in the index.html header, which contains a div that contains an image carousel.
Displaying the site in small devices (tablets and cell phones), the carousel hides properly using "hidden-xs" and "hidden-xm" classes, but the header remains with a fixed height of 929px as Element Inspector shows, generating a very tall empty space before the next section.
Below you´ll find the header code, including carousel:
<header id="intro">
<!-- CAROUSEL STARTS -->
<div id="myCarousel" class="carousel slide hidden-xs hidden-xm" data-ride="carousel" data-interval="2000" style="border:1px solid red;">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="d-block img-fluid" src="img/header-01.jpg" align="left" alt="Slide 01">
<!-- <div class="carousel-caption">
<p>El conocimiento es libertad</p>
</div> -->
</div>
<div class="item">
<img class="d-block img-fluid" src="img/header-02.jpg" alt="Slide 02">
<!-- <div class="carousel-caption">
<p>El respeto a sí mismo</p>
</div> -->
</div>
<div class="item">
<img class="d-block img-fluid" src="img/header-03.jpg" alt="Slide 03">
<!-- <div class="carousel-caption">
<p>El respeto a los demás</p>
</div> -->
</div>
<div class="item">
<img class="d-block img-fluid" src="img/header-04.jpg" alt="Slide 04">
<!-- <div class="carousel-caption">
<p>Jardín - Primaria - Secundaria</p>
</div> -->
</div>
<div class="item">
<img class="d-block img-fluid" src="img/header-05.jpg" alt="Slide 05">
<!-- <div class="carousel-caption">
<p>El conocimiento es libertad</p>
</div> -->
</div>
<div class="item">
<img class="d-block img-fluid" src="img/header-06.jpg" alt="Slide 06">
<!-- <div class="carousel-caption">
<p>El respeto a sí mismo</p>
</div> -->
</div>
<!-- Wrapper for slides ENDS -->
</div>
<!-- CAROUSEL ENDS -->
</div>
</header>
And a couple of screenshots:
Home page full size (index.html)
Home page small devices width
Try putting this in your CSS file
#intro {
height: auto !important;
}
This should override the default height pixel.
If you want to have the fullscreen image, then write like this
#intro {
height: 100vh !important;
}
Hope this fixes your problem.
I have an image that's 1300px wide, using bootstrap I want this image to fill the full width of my container which is set to 1300px. I create a row, give it a full 12 columns and then add in the image with a class of image responsive. With this set up I get the output below.
I want my image to stretch all the way along to where my image is in my content, here is my code.
<div class="row">
<div class="container">
<div class="col-md-12">
<img src="<?php bloginfo('template_directory'); ?>/assets/img/homeBanner.jpg" alt="placeholder 960" class="img-responsive"/>
</div>
</div>
</div>
The image is set to width 100% so not sure why it isn't filling the container.
In bootstrap 4.1, the w-100 class is required along with img-fluid for images smaller than the page to be stretched:
<div class="container">
<div class="row">
<img class='img-fluid w-100' src="#" alt="" />
</div>
</div>
see closed issue: https://github.com/twbs/bootstrap/issues/20830
(As of 2018-04-20, the documentation is wrong: https://getbootstrap.com/docs/4.1/content/images/ says that img-fluid applies max-width: 100%; height: auto;" but img-fluid does not resolve the issue, and neither does manually adding those style attributes with or without bootstrap classes on the img tag.)
Check if this solves the problem:
<div class="container-fluid no-padding">
<div class="row">
<div class="col-md-12">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
</div>
</div>
</div>
CSS
.no-padding {
padding-left: 0;
padding-right: 0;
}
Css class no-padding will override default bootstrap container padding.
Full example here.
#Update
If you use bootstrap 4 it could be done even simpler
<div class="container-fluid px-0">
<div class="row">
<div class="col-md-12">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
</div>
</div>
</div>
Updated example here.
First of all if the size of the image is smaller than the container, then only "img-fluid" class will not solve your problem. you have to set the width of image to 100%, for that you can use Bootstrap class "w-100".
keep in mind that "container-fluid" and "col-12" class sets left and right padding to 15px and "row" class sets left and right margin to "-15px" by default.
make sure to set them to 0.
Note:
"px-0" is a bootstrap class which sets left and right padding to 0 and
"mx-0" is a bootstrap class which sets left and right margin to 0
P.S. i am using Bootstrap 4.0 version.
<div class="container-fluid px-0">
<div class="row mx-0">
<div class="col-12 px-0">
<img src="images/top.jpg" class="img-fluid w-100">
</div>
</div>
</div>
Here's what worked for me. Note: Adding the image within a row introduces some space so I've intentionally used only a div to encapsulate the image.
<div class="container-fluid w-100 h-auto m-0 p-0">
<img src="someimg.jpg" class="img-fluid w-100 h-auto p-0 m-0" alt="Patience">
</div>
container class has 15px left & right padding, so if you want to remove this padding, use following, because row class has -15px left & right margin.
<div class="container">
<div class="row">
<img class='img-responsive' src="#" alt="" />
</div>
</div>
Codepen: http://codepen.io/m-dehghani/pen/jqeKgv
This will do the same as many of the other answers, but will make sides flush with the window, so there is no scroll bars.
<div class="container-fluid">
<div class="row">
<div class="col" style="padding: 0;">
<img src="example.jpg" class="img-responsive" alt="Example">
</div>
</div>
</div>