It is always challenging to make vertical align middle text or image using CSS or even with bootstrap. But as we know bootstrap 4 launch new version of bootstrap. We can do it simply and easily vertical center div vertically and horizontally, you have to just use some Vertical alignment class of bootstrap 4 like .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top.

In this snippet, I created a simple three-box design. the first box I set vertical align center text using bootstrap 4. second box I set vertical align middle div. in the last box, I set vertical align the middle image. you can download code and also check the demo.


<!DOCTYPE html> <html> <head> <title>Vertical align Center Design Using Bootstrap 4.0</title> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="custom.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-7 main-section text-center"> <div class="col-lg-12 heding"> <p class="mb-3 mt-2 p-0 ml-0">Vertical align Center Design Using Bootstrap 4.0</p> </div> <div class="row section"> <div class="col-sm-12 align-self-center"> <h6>Vertical align Center Text </h6> </div> </div> <div class="row section2"> <div class="col-lg-12 align-self-center"> <img src="//nicesnippets.com/image/imgpsh_fullsize.png"> </div> </div> <div class="row section3"> <div class="col-lg-12 align-self-center"> <span> NiceSnippets.com </span><br> <img src="//nicesnippets.com/image/imgpsh_fullsize.png" class="mt-3"> </div> </div> </div> </div> </div> </body> </html>
body{ font-family: 'Roboto Condensed', sans-serif; background-color: #f5f5f5; } .heding{ background-color: #f5f5f5; } .heding p{ font-size:25px; text-shadow: 0 1px 0 rgb(255,205,202) , 0 2px 0 rgb(201,201,201) , 0 3px 0 rgb(187,187,187) , 0 4px 0 rgb(185,185,185) , 0 5px 0 rgb(170,170,170) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 5px 10px rgba(0,0,0,0.247059) , 0 10px 10px rgba(0,0,0,0.2) , 0 20px 20px rgba(0,0,0,0.14902) ; } .main-section{ position:relative; left: 50%; transform: translate(-50%,0%); } img{ width:80px; height:80px; } .section,.section2,.section3{ background-color: #F4837D; height:250px; color:#fff; } .section2{ background-color:#F9B38F; } .section3{ background-color: }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post


Random Blog