html - Is it possible to make the div the same height as images in a row in Bootstrap -
i using "row" class bootstrap , have 2 images , div contains text. here example here: http://notionfresh.com/testsite/
my aim make elements in row same height. there way can achieve using in given example?
.colly { margin-bottom: 20px; } .colly2 { margin-bottom: 20px; } .pclass { padding: 20px; } .textbox { height: auto; min-width: 270px; background: #000; font-size: 15px; font-style: oblique; color: #fff; text-align: center; margin: 0 auto; display: table-cell; vertical-align: middle; } <!doctype html> <html> <head> <title>portfolio</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- bootstrap --> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <link href="custom.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet" /> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.js"></script> </head> <body> <div class="row"> <div class="colly col-lg-4 col-md-4 col-sm-6"> <a href="img/portfolio_2.png" ><img src="img/portfolio_2.png" class="img-responsive img-home-portfolio"/></a> </div> <div class="colly col-lg-4 col-md-4 col-sm-6"> <a href="img/portfolio_3.png" ><img src="img/portfolio_3.png" class="img-responsive img-home-portfolio"/></a> </div> <div class="colly2 col-lg-4 col-md-4 col-sm-6"> <div class="textbox"> <p class="pclass">sed cursus libero risus molestie, vitae lobortis mi aliquam. curabitur euismod velit risus, et scelerisque elit rhoncus quis. integer semper lorem quis nisl viverra, nec egestas massa rhoncus. in vitae eros accumsan, commodo tellus at, volutpat neque. sed rutrum, justo quis congue dictum, odio risus imperdiet nunc, sit amet laoreet nibh ex id tortor. proin pretium ipsum. ut fermentum urna @ lobortis interdum.</p> </div> </div> </div><!-- /.row --> </body> </html>
Comments
Post a Comment