user2950439 user2950439 - 6 months ago 11
CSS Question

I'm trying to position my carousel caption on top but it's not working

I'm trying to position my carousel caption on top but it's not working and I also want to the background to have a 100% width (I want it to fill the whole row of where it's placed, I don't want it to be limited to the text width size)

here's my html code

<div class="carousel-caption">
<h4><span class="caption-style"> Caption goes here</span></h4>
</div>


and here's my css styling

.caption-style {
color: white !important;
background: rgba(0, 0, 0, 0.5);
display:block;
padding-top: 15px;
padding-bottom: 15px;
top: 0;
bottom: auto;
width:100%;
}

Answer

For carousel caption top,

you can use your top size by using margin-top

.carousel-caption {
    margin-top: -2em;
}

or you can use

.carousel-caption {
        top: 0;
    }