[Bootstrap] Text overlay center inside the image

markup

<div class="row" id="box-search">
    <div class="thumbnail text-center">
        <img src="img/cafe.jpg" alt="" class="img-responsive">
        <div class="caption">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, quisquam?</p>
        </div>
    </div>
</div>

style

.thumbnail {
    position: relative;
}

.caption {
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
}

Thank you!

<3 Great

Thanks!

Still works in July 2018. Thanks!

its not reponsive for smaller screens

I change a little bit. The text center could be in the middle of the image.

.thumbnailaaa {
    position: relative;
}

.captionaaa {
    position: absolute;
    margin: 0;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

Thanks!

I really don't understand why should I use Bootstrap.. This stuff I can do in vanilla css with the same amount of work

Super like this

thank you mate, it's really helpful :D

I really don't understand why should I use Bootstrap.. This stuff I can do in vanilla css with the same amount of work

I think it's for noobs like me who are still trying to figure out css, but after a few months of using Bootstrap I think I'm understanding a lot more ! :-D Hope to get good.

If you want to do this without extra css, you can use Card

My example:

<div class="card overflow-hidden border-0 rounded-0 text-center">
	<img src="...." class="card-img rounded-0" alt="...">
	<div class="card-img-overlay d-flex flex-column justify-content-center">
		<a class="stretched-link" href="...">
			<h3 class="card-title text-uppercase">Lorem ipsum</h3>
		</a>
	</div>
</div>

Very helpful, thank you!

thank you!