Search code examples
csstwitter-bootstrapalignment

Bootstrap carousal caption position at right bottom

How to position the caption at right bottom, with maximum width and responsive ? I don't want the caption out side the image. I set the following properties.

    .carousel-caption {
    right: 0;
    text-align: right;
    background-color:black;
    max-width: 300px;
    margin-left: 300px;
}

Once I set the max-width: 300px; the caption is positioned in middle(because the right portion is trimmed by max-width). If I set margin-left, I loose responsiveness. Do I need to use media Queries ?

http://jsfiddle.net/Y67Zs/

Any Help is appreciated.

Solution

  • You must give value to the left attribute of your caption like this : 

    .carousel-caption {
    right: 5%;
    text-align: right;
    background-color: black;
    max-width: 300px;
    left: auto;
    padding:5px;
}

    Link : http://jsfiddle.net/Y67Zs/9/