Bootstrap slider image and caption side by side

HTML & CSS
1

Hi,

I am trying to get bootstrap carousel image and caption to stay side by side, i.e. image width 5 columns, caption width 7 columns.

No matter what I tried can’t get it, the image doesn’t resize to the column width, thus the caption stays on top of image; it dows stack when resizing, thus the image does not resize (gets cut in width).
I did manage to have the caption above, or below the image by changing the position:absolute to relative, but I’d like to have the side by side, and be able to change column number (width).

Test page here:
holytablets dot org/gallery_test_2

Thank you

These are the html, and css I am using

html

<div id="fz-gallery-slider-1" class="carousel slide" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <div class="col-xs-5">
        <img src="images_test/slider_test_01.jpg" />
      </div>
      <div class="col-xs-7">
        <div class="carousel-caption">
            <h2>Slide 1</h2>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="col-sx-5">
        <img src="images_test/slider_test_02.jpg" />
      </div>
      <div class="col-xs-7">
        <div class="carousel-caption">
            <h2>Slide 2</h2>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="col-xs-5">
        <img src="images_test/slider_test_03.jpg" />
      </div>
      <div class="col-xs-7">
        <div class="carousel-caption">
            <h2>Slide 3</h2>
        </div>
      </div>
    </div>
  </div>
  <div class="controllers col-sm-8 col-xs-12">
    <!-- Controls -->
      <a class="left carousel-control" href="#fz-gallery-slider-1" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#fz-gallery-slider-1" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
  </div>
<div class="controllers col-sm-8 col-xs-12">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#fz-gallery-slider-1" data-slide-to="0" class="active"></li>
        <li data-target="#fz-gallery-slider-1" data-slide-to="1"></li>
        <li data-target="#fz-gallery-slider-1" data-slide-to="2"></li>
      </ol>
</div>
</div>

css

  .carousel-caption {
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding-top: 0;
    padding-bottom: 0;
    color: #000;
    text-align: center;
    text-shadow: none;
    //text-shadow: 0 1px 2px rgba(0,0,0,.6);
    }
2

Ok, I solved te responsive bit of it, just added the img-responsive class to the img tag.

Now there is a fine tuning I can’t get:
The image when is sliding to the left shows some 20px out of the “image container”.

3

If you are talking about the 15px padding on the left then that’s the default padding on that bootstrap grid.

You can remove it with:

.carousel-inner .col-xs-5{padding-left:0}

However you should read the bootstrap documentation as there is probably a class or something you could add to offset this. (I’ve stopped using the actual bootstrap grids a long time ago.)

4

Sorry for responding so late; saw your post before you editted with your question.

You could add class=“row” to the carousel-inner element which will give -15px left and right margin to pull back the element.

However, building off what Paul mentioned, I’d just create a .padding-0 class (obviously with the padding:0; rule on it) and apply it to the columns. The box-sizing is set to border-box so it won’t mess with anything else.

Those are really your only two options. Frameworks aren’t flexible. Yet another reason I hate frameworks (they really keep piling up…)

5

Thank you both, always great suggestions by you guys.

@PaulOB, @RyanReese
I get your point about frameworks, and I know there is a lot of waste there, but when you are not a guru you gotta live with them. Anyhow the site I am working on is built already on bootstrap, and since I can’t put it up online, I just use that test page.

Sorry for responding so late; saw your post before you editted with your question.

I’d sign for that delay anytime to get help from you two.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.