Jordan Hensley Jordan Hensley - 1 month ago 16
HTML Question

display: inline-block wont center in bootstrap

I'm trying to fit the content box to the length of the text, while also centering them under my images. I am using bootstrap grid system.

HTML



<div class="row textbackground">
<div class="col-md-4">
<img class="imgsize img-fluid" src="math.jpg" alt="student">
<p class="subtext text-center" >Student by Day</p>
</div>
<div class="col-md-4">
<img class="imgsize img-fluid" src="coder.jpeg" alt="web design">
<p class="subtext text-center" >Evening Web Developer</p>
</div>
<div class="col-md-4">
<img class="imgsize img-fluid" src="rockstar.jpg" alt="rockstar">
<p class="subtext">Rockstar by Night</p>
</div>
</div>


CSS



.imgsize{
height: 250px;
width: auto;
border-style: solid;
border-width: 10px;
border-radius: 50%;
border-color: #111111;
display: block;
margin:0 auto;
}

.subtext{
padding-top: 20px;
background-color: #6c757d;
display: inline-block;
text-align: center;
}


Result



This is what I end up with

Answer Source

Add text-center class to parent element in your case col-md-4

You try to text the center within the element which itself is not centered nor it is of a full width.