The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to position a responsive carousel image

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #208235

    I’m using a bootstrap carousel and I can’t figure out how to position the image to the right side so that as the page resizes it always shows the right side and not the left.

    Usually I would use background images and do something like:
    background-position: left bottom ;

    So when it’s not a background image how to you set the image to position to the right as the page width reduces?

    here is the html for the slider
    <div id=”main-slider” class=”carousel slide” data-ride=”carousel”>

    <!– Wrapper for slides –>
    <div class=”carousel-inner” role=”listbox”>
    <div class=”item active ” id=”slide-1″>
    <img class=”img-responsive” src=”assets/images/banners/banner_home.jpg” alt=””>
    <div class=”carousel-caption”>
    <h1 class=”gray light-shadow banner-page-title”><span class=””>lorum ipsom</span></h1>

    <div class=”item” id=”slide-2″>
    <img class=”img-responsive” src=”assets/images/banners/banner_autoaccidents-2.jpg” alt=”…”>
    <div class=”carousel-caption”>
    <h1 class=”gray light-shadow banner-page-title”>lorum ipsom</h1>
    <h1 class=”red banner-slogan”>lorum ipsom</h1>


    <!– Controls –>
    <a class=”left carousel-control” href=”#main-slider” role=”button” data-slide=”prev”>
    <span class=”glyphicon glyphicon-chevron-left” aria-hidden=”true”></span>
    <span class=”sr-only”>Previous</span>
    <a class=”right carousel-control” href=”#main-slider” role=”button” data-slide=”next”>
    <span class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”></span>
    <span class=”sr-only”>Next</span>
    here is a link:


    .img-responsive {
    right: 0;

    That should do the trick

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.