"Display Flex"
Bootstrap 3.3.0 Snippet by naimansari

<div class="container"> <div class="details" style="background-color:coral;">RED</div> <div class="details" style="background-color:lightblue;">BLUE</div> <div class="details" style="background-color:lightgreen;">Green div with more content. Green div with more content.Green div with more content. Green div with more content. Green div with more content. Green div with more content. Green div with more content.</div> </div>
.container { margin-top:60px; height:300px; background:#333; color:#333; padding:15px; display: -webkit-flex; /* Safari */ -webkit-align-items: center; /* Safari 7.0+ */ display: flex; align-items: stretch; } .details { -webkit-flex: 1; /* Safari 6.1+ */ flex: 1; padding:15px; } .details:nth-child(2) { align-self:center; } .details:nth-child(3) { align-self:flex-end; } @media (max-width:767px) { .container { display:block; height:auto; } }

Similar snippets: See More


Comments:

comments powered by Disqus