Coding Defined

a blog for those who code

Saturday 28 January 2017

How to do text-align and vertical-align in Bootstrap

Home articles Bootstrap CSS How to do text-align and vertical-align in Bootstrap
January 28, 2017 , ,
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.

Related articles

Read more
by at
Tags , ,

No comments:

Post a Comment