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.
2
Answers
Please refer this,
In CSS, ADD
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:
That should work.
You don’t need a new class. You need to simplify your code instead.
Remove
<div class="col-sm-12" >
. This block only adds extra padding.Remove
style="margin-top:40px"
. And remove theposition: absolute;
property from the.MSA-masthead
class.Remove
class="img-responsive center-block"
from all slides. Also remove.inner-item {...}
and.carousel img {...}
from your CSS. Use this code instead:width: 1200px;
property from the.MSA-footer
class. The width of the footer will be 100% due to the default values.Please check the result: https://jsfiddle.net/glebkema/mrytx12L/