In this post we will be discussing about how to do text-align and vertical-align in Bootstrap. Text alignment or vertical alignment is setting the text flow or image placement relative to a page, column, table cell or tab. Now we want the same thing in our bootstrap.
Want to learn about Bootstrap : Start Here Bootstrap Tutorial
Text-Align
For left, right and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system as shown below :
<p class="text-left">Please Like and Share the www.CodingDefined.com Blog, if you find it interesting and helpful.</p>
<p class="text-center">Please Like and Share the CodingDefined Blog, if you find it interesting and helpful.</p>
<p class="text-right">Please Like and Share the CodingDefined Blog, if you find it interesting and helpful.</p>
It will give the result as
Vertical-Align
For vertical align we need to use a custom class having display: inline-block, vertical-align as middle as shown below :
<div class="container">
<div class="row row-center">
<div class="col-sm-4 valign">
<p>Please Like and Share the www.CodingDefined.com Blog, if you find it interesting and helpful.</p>
</div>
<div class="col-sm-4 valign">
<p>Please Like and Share the www.CodingDefined.com Blog, if you find it interesting and helpful.</p>
</div>
<div>
</div>
CSS Used
.valign {
float: none;
display: inline-block;
vertical-align:middle;
}
.row-center {
display: table;
}
Result :
Please Like and Share the CodingDefined Blog, if you find it interesting and helpful.
No comments:
Post a Comment