Skip to content

Instantly share code, notes, and snippets.

@petehouston

petehouston/markup

Created October 17, 2014 07:20
Show Gist options
  • Save petehouston/85dd33210c0764eeae55 to your computer and use it in GitHub Desktop.
Save petehouston/85dd33210c0764eeae55 to your computer and use it in GitHub Desktop.
Download ZIP
[Bootstrap] Text overlay center inside the image
Raw
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>
Raw
style
.thumbnail {
position: relative;
}
.caption {
position: absolute;
top: 45%;
left: 0;
width: 100%;
}
@kanlukasz
Copy link

kanlukasz commented Mar 4, 2020 •
edited
Loading

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>

@tonyadastra
Copy link

Very helpful, thank you!

@SenaOzcn
Copy link

SenaOzcn commented Nov 8, 2021

thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment