css - Bootstrap grid layout issue - does not work as intended -


all items in grid layout set same height, still have problem:

enter image description here

<!-- featured-box --> <div class="featured-box">      <div class="col-md-4 col-sm-4 col-xs-6">         <div class="video-box featured-event-box">              <div class="row">                 <div class="col-md-4">                     <div class="featured-event-image-box">                         <a href="#"><img src="images/featured-event-01.jpg" class="img-responsive transparent-onhover" /></a>                     </div>                 </div>                  <div class="col-md-8">                     <p>20th jan 2016</p>                     <h4 class="featured-event-heading truncate"><a href="#" title="lorem ipsum dolor sit amet">lorem ipsum dolor sit amet</a></h4>                     <p class="truncate-multiple" title="nemore praesent eam. duo partem possim. sit posse euismod ad, pro no lorem melius dissentiet. ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.">nemore praesent eam. duo partem possim. sit posse euismod ad, pro no lorem melius dissentiet. ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.</p>                 </div>             </div>          </div>     </div>      <div class="col-md-4 col-sm-4 col-xs-6">         <div class="video-box">             <!-- 16:9 aspect ratio -->             <div class="embed-responsive embed-responsive-16by9">                 <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/qyv5r_e5htm" frameborder="0" allowfullscreen></iframe>             </div>         </div>     </div>      <div class="col-md-4 col-sm-4 col-xs-6">         <div class="video-box featured-event-box">              <div class="row">                 <div class="col-md-4">                     <div class="featured-event-image-box">                         <a href="#"><img src="images/featured-event-01.jpg" class="img-responsive transparent-onhover" /></a>                     </div>                 </div>                  <div class="col-md-8">                     <p>20th jan 2016</p>                     <h4 class="featured-event-heading truncate"><a href="#" title="lorem ipsum dolor sit amet">lorem ipsum dolor sit amet</a></h4>                     <p class="truncate-multiple" title="nemore praesent eam. duo partem possim. sit posse euismod ad, pro no lorem melius dissentiet. ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.">nemore praesent eam. duo partem possim. sit posse euismod ad, pro no lorem melius dissentiet. ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.</p>                 </div>             </div>          </div>     </div>      <div class="col-md-4 col-sm-4 col-xs-6">         <div class="video-box">             <!-- 16:9 aspect ratio -->             <div class="embed-responsive embed-responsive-16by9">                 <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/feq99sugdsw" frameborder="0" allowfullscreen></iframe>             </div>         </div>     </div>      <div class="col-md-4 col-sm-4 col-xs-6">         <div class="video-box featured-event-box">              <div class="row">                 <div class="col-md-4">                     <div class="featured-event-image-box">                         <a href="#"><img src="images/featured-event-01.jpg" class="img-responsive transparent-onhover" /></a>                     </div>                 </div>                  <div class="col-md-8">                     <p>20th jan 2016</p>                     <h4 class="featured-event-heading truncate"><a href="#" title="lorem ipsum dolor sit amet">lorem ipsum dolor sit amet</a></h4>                     <p class="truncate-multiple" title="nemore praesent eam. duo partem possim. sit posse euismod ad, pro no lorem melius dissentiet. ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.">nemore praesent eam. duo partem possim. sit posse euismod ad, pro no lorem melius dissentiet. ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.</p>                 </div>             </div>          </div>     </div>      <div class="col-md-4 col-sm-4 col-xs-6">         <div class="video-box">             <!-- 16:9 aspect ratio -->             <div class="embed-responsive embed-responsive-16by9">                 <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/r_kewddtrvc" frameborder="0" allowfullscreen></iframe>             </div>         </div>     </div>  </div> <!-- featured-box --> 

css:

.featured-heading-box {     padding: 0 15px; }  .featured-heading {     font-size: 20px;     padding: 0 0 15px 0;     border-bottom: 1px solid #b2b2b2; }  .video-box {     padding: 15px 0 15px 0;     /*border: 1px solid red;*/ }  /**  * https://css-tricks.com/snippets/css/css-box-shadow/#article-header-id-1  */ .featured-event-box {     padding: 15px;     margin: 15px 0 15px 0;     min-height: 196px;     overflow: hidden;     border: 1px solid #e6e6e6;     background-color: #f9f9f9;     -moz-box-shadow:    inset 0 0 10px #e6e6e6;    -webkit-box-shadow: inset 0 0 10px #e6e6e6;     box-shadow:         inset 0 0 10px #e6e6e6; }  .featured-event-image-box {    margin-bottom: 15px; }  .featured-event-heading {     font-size: 14px;     color: inherit; }  .featured-event-heading a:hover {     text-decoration: none;     color: #888; } 

any idea why , how can fix this?

if going use columns in grid, need have columns inside of row:

<div class="row">     <div class="col-md-4">             stuff     </div>     <div class="col-md-4">            more stuff     </div> </div> 

Comments

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

Using django-mptt to get only the categories that have items -