1

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.

Community
  • 1
  • 1
j-p
  • 3,698
  • 9
  • 50
  • 93

2 Answers2

2

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.

j-p
  • 3,698
  • 9
  • 50
  • 93
GS Bala
  • 390
  • 1
  • 11
2

You don't need a new class. You need to simplify your code instead.

  1. Remove <div class="col-sm-12" >. This block only adds extra padding.

  2. Remove style="margin-top:40px". And remove the position: absolute; property from the .MSA-masthead class.

  3. Remove class="img-responsive center-block" from all slides. Also remove .inner-item {...} and .carousel img {...} from your CSS. Use this code instead:

.carousel-inner img {
  height: auto;
  width: 100%;
}
  1. Your footer adds long horizontal scroll when the screen width is less than 1200px. To fix it remove the 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/

Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68