Bootstrap - Vertical align

This chapter discusses about the vertical alignment utilities provided by Bootstrap.

• You can change the vertical alignment of inline, inline-block, inline-table, and table cell elements.

• Choose from following classes as per your need:

  • .align-baseline

  • .align-top

  • .align-middle

  • .align-bottom

  • .align-text-bottom

  • .align-text-top

• In order to align the non-inline content, use flex box utilities

Let us see an example to align the inline elements:

Example

You can edit and try running this code using the Edit & Run option.

   
     
     
     
     
     
     
   
   
     

        
Vertical align
        
Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table and table cell elements):



        align baseline
        align top
        align middle
        align bottom
        align text top
        align text bottom 
     
   

Let us see an example to align the table cell elements:

Example

You can edit and try running this code using the Edit & Run option.

   
      
      
      
      
      
      
   
   
      

        
Vertical Align - Table cell elements
        
Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table and table cell elements):



        

           

            

             
align baseline
             
align top
             
align middle
             
align bottom
             
align-text-top
             
align-text-bottom