jpmyob jpmyob - 5 months ago 12
CSS Question

bootstrap carousel images short of declared width

I'm curious if anyone has a solution to this problem, that ISN'T mentioned in the other posts. I have tried all the UP voted solutions mentioned in other posts, but my problem persists.

Specifically - the "example" code and "Stock" bootstrap carousel seems to ADD margins to the images, thus making them smaller than the container, and NOT aligning with the other containers on the page.

Here is the recommended code that works - but has margins I cannot seem to 'easily' remove.

<div class="container" style="margin-top:40px" >

<div class="row" >

<div class="col-sm-12" >

<div id="carousel-msa" class="carousel slide" data-ride="carousel">

<!-- Indicators -->
... carousel code...


I can force it using additional "style" arguments, BUT this makes the image NON-responsive - and I need it to be responsive.

<div id="carousel-msa" class="carousel slide" data-ride="carousel" style="margin-left:-15px; width:1200px">


If you view the JS Fiddle,you will see the images is horizontally compressed, and does not align with the other elements.

https://jsfiddle.net/Le16u319/1/

Posts I've looked at so far - but who's solutions do NOT solve my problem are:

Bootstrap Carousel image doesn't align properly

Twitter Bootstrap: Have carousel images full width and height

Bootstrap Carousel image doesn't align properly

Any help MUCH appreciated.

Answer

Please refer this,

In CSS, ADD

.slider{
  padding-left:0px !important;
  padding-right:0px !important;
}

This is all you'll need, you can disregard the other solutions code that you tried in the CSS.

Then, Make sure to add the reference to the Slider class in the code, here:

        <div class="container slider" style="margin-top:40px" >
            <div class="row" >
                <div class="col-sm-12" >
                    <div id="carousel-msa" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        ...

That should work.

Comments