I'm trying to position a horizontal line on a section for a site I'm building and can't get it in the correct place. This is a Photoshop version of how it should look -
This is my coded version -
I'm using the hr tag to create it as this seems the most straightforward way - here's the code -
hr {
display: block;
width: 250px;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/gumby/2.6.4/css/gumby.min.css" rel="stylesheet"/>
<section id="welcome">
<div class="container">
<div class="row">
<div class="twelve columns">
<h4>WELCOME TO FEATURE MEDIA</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
</div>
</div>
<hr>
<div class="row">
<div class="four columns">
<div id="video">
<h3>VIDEO</h3>
<img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="blog">
<h3>BLOG</h3>
<img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="faq">
<h3>FAQ</h3>
<img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;">
</div>
</div><hr>
</div>
</div>
</section>
The hr is already given a style in the framework, so if you give it a class like this, it will override the default.
The major reason why it is not exactly positioned vertically between the text and image part, is that the text row and image row has not the same top/bottom margin/padding, so I increased the margin-top/bottom a little, and the second hr, the one after the images, were placed within the row, so I moved it outside.
To get it exact in between, you have elaborate with the row's padding/margin.
Stack snippet
hr.hr250center {
display: block;
width: 250px;
margin-top: 2em;
margin-bottom: 2.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-color: red; /* here you set color */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>
<section id="welcome">
<div class="container">
<div class="row">
<div class="twelve columns">
<h4>WELCOME TO FEATURE MEDIA</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque
facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus
ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis
lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
</div>
</div>
<hr class="hr250center">
<div class="row">
<div class="four columns">
<div id="video">
<h3>VIDEO</h3>
<img src="http://placehold.it/100/f00" alt="Video" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="blog">
<h3>BLOG</h3>
<img src="http://placehold.it/100/f00" alt="blog" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="faq">
<h3>FAQ</h3>
<img src="http://placehold.it/100/f00" alt="FAQ" style="width:300px;height:150px;">
</div>
</div>
</div>
<hr class="hr250center">
</div>
</section>
You can use the option: 'padding-top' or 'padding-bottom'
<section id="welcome">
<div class="container">
<div class="row" style="padding-bottom: 50px;">
<div class="twelve columns">
<h4>WELCOME TO FEATURE MEDIA</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
</div>
</div>
<hr>
<div class="row" style="padding-top: 50px; padding-bottom: 50px;">
<div class="four columns">
<div id="video">
<h3>VIDEO</h3>
<img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="blog">
<h3>BLOG</h3>
<img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="faq">
<h3>FAQ</h3>
<img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;">
</div>
</div>
</div> <hr>
</div>
</section>
Related
I have two separate classes in my gallery box container. I've set it to use a flex display, however there is no spacing in the column. Plus, It's not showing all of the pictures as well as the text.
I've messed around with a few of the justify-content attributes, but that hasn't seemed to work. I've also tried messing around with the classes with no luck.
HTML:
<body>
<h1>Gallery Mockup</h1>
<div id="content">
<!-- put your card HTML here -->
<div class="card">
<div id="workplease">
<button onclick="contract_gallery()" type="button" id="close_gallery" style="display:none" align="left">× Close</button>
<center>
<h2>Gallery Mockup</h2>
</center>
</div>
<div id="gallerybox" class="inactive">
<img class="pic" id="pic1" src="https://picsum.photos/230/400">
<img class="pic" id="pic2" src="https://picsum.photos/230/400" style="display:none">
<div class="inactive" id="gtext">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat pellentesque lacus, sit amet sodales tellus porttitor sed. Donec mattis lectus in hendrerit mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis id est vitae leo viverra egestas. Donec commodo, mauris ut sagittis commodo, erat erat tristique metus, at faucibus quam arcu eu metus. Duis eget metus eu arcu porttitor venenatis nec sed nibh. Sed eleifend efficitur orci. Suspendisse eu felis vitae sem varius fringilla. Aliquam erat volutpat. Integer a molestie felis, non ultricies mi. Proin facilisis commodo nisi id fermentum. Ut porttitor molestie rhoncus. Curabitur tempus volutpat mauris, eu dignissim mauris viverra quis.</p>
<p>Donec elementum vestibulum felis, ac commodo erat commodo a. Aenean in felis scelerisque justo ornare gravida et sed massa. Etiam in venenatis neque, accumsan volutpat sapien. Sed molestie nisl sem, ac fringilla mauris dignissim nec. Sed placerat ut elit vitae convallis. Donec iaculis efficitur tincidunt. Suspendisse mollis ut orci at maximus. Sed consectetur diam a mauris consectetur, eu sodales purus sollicitudin. Pellentesque quis tellus id est venenatis pharetra fringilla quis libero. Praesent semper, odio eu consectetur malesuada, enim felis euismod eros, in aliquam leo mi non est. Nam ornare scelerisque nisi nec gravida.</p>
</div>
<img class="pic" id="pic3" src="https://picsum.photos/230/400" style="display:none">
<img class="pic" id="pic4" src="https://picsum.photos/230/400" style="display:none">
<img class="pic" id="pic5" src="https://picsum.photos/230/400" style="display:none">
<img class="pic" id="pic6" src="https://picsum.photos/230/400" style="display:none">
<img class="pic" id="pic7" src="https://picsum.photos/230/400" style="display:none">
<img class="pic" id="pic8" src="https://picsum.photos/230/400" style="display:none">
</div>
<center>
<button type="button" id="gbutton" onclick="expand_gallery()">See Gallery</button>
</center>
</div>
</div>
<script src="js/final-frontier.js"></script>
</body>
CSS:
#media only screen and (max-width: 490px) {
#gallerybox.active {
display: flex;
flex-direction: column;
justify-content: center;
}
}
When the width of the screen goes below 490px, it's supposed to go to flex view, and it does, however there is no spacing in between the photos, and it's not showing all of them. This is what it looks like: https://i.imgur.com/QC9PXfV.png
Your best options would be to wrap your images in div's and use Flexbox accordingly. This approach always works for me and I would recommend it:
Your Html
<div class="flexbox">
<div class="item">
<img src=""/>
</div>
<div class="item">
<img src="" />
</div>
<div class="item">
<img src=""/>
</div>
Your Css:
#media only screen and (max-width: 490px) {
.flexbox {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
width: 100%; //take full width
}
.item img {
width: 100%; //set 100% width
height: auto; //auto height adjustment
}
}
I have problem with my buttons when I resize the browser to under 1120px the buttons aren't responsive.
I don't know if my code is wrong or if I missed something else(?)
This is piece of my code :
<!-- Main content -->
<section class="content">
<div class="row" style="margin-top: 100px">
<div class="col-lg-6" style="margin-top: 80px">
<h3 style="font-weight: 600; text-align: center;">About DSSDI Universitas Gadjah Mada</h3>
<h4><p style="line-height: 1.4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum sem sit amet ante mollis venenatis. Donec maximus diam nec justo sodales vehicula. Suspendisse cursus turpis in volutpat fermentum. Maecenas sapien nunc, laoreet eget risus sit amet, laoreet suscipit velit. Donec ex sem, convallis in aliquet nec, elementum ac est. Proin quis tortor neque. Nulla tincidunt id neque a malesuada. Nulla rutrum mattis urna ut tempor. Cras pellentesque pretium nisi a fermentum. In efficitur id felis ac tincidunt. Sed sed nisl viverra, posuere lectus ut, pulvinar nisl. Curabitur cursus tortor sed malesuada efficitur. Praesent at varius quam, sit amet congue neque. Vivamus vitae elit iaculis, malesuada justo a, laoreet libero. Phasellus odio metus, luctus at ipsum lacinia, ultricies rutrum ligula.</p></h4>
</div>
<div class="col-lg-6">
<div class="box box-default" style="margin-top: 80px;">
<div class="box-header with-border" style="text-align: center;">
<h3 class="box-title"><i class="fa fa-group fa-5x" style="font-size: 150px; margin-top: 50px; margin-bottom: 10px"></i></h3>
</div>
<div class="box-body">
<div class="row">
<h3 style="text-align: center; font-weight: 600; margin-bottom: 20px">Login as</h3>
ADMIN<br>
SISWA
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</dv>
</section>
<!-- /.content -->
pic 1 : more than 1120px
pic 2 : under 1120px
ss1
ss2
Based on the classes, I am assuming that you are using Bootstrap. If this is the case, you could add the classes col-xs-10 col-xs-offset-1 to your buttons:
ADMIN<br>
SISWA
Here is the full snippet, fully functional:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="content">
<div class="row" style="margin-top: 100px">
<div class="col-lg-6" style="margin-top: 80px">
<h3 style="font-weight: 600; text-align: center;">About DSSDI Universitas Gadjah Mada</h3>
<h4><p style="line-height: 1.4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum sem sit amet ante mollis venenatis. Donec maximus diam nec justo sodales vehicula. Suspendisse cursus turpis in volutpat fermentum. Maecenas sapien nunc, laoreet eget risus sit amet, laoreet suscipit velit. Donec ex sem, convallis in aliquet nec, elementum ac est. Proin quis tortor neque. Nulla tincidunt id neque a malesuada. Nulla rutrum mattis urna ut tempor. Cras pellentesque pretium nisi a fermentum. In efficitur id felis ac tincidunt. Sed sed nisl viverra, posuere lectus ut, pulvinar nisl. Curabitur cursus tortor sed malesuada efficitur. Praesent at varius quam, sit amet congue neque. Vivamus vitae elit iaculis, malesuada justo a, laoreet libero. Phasellus odio metus, luctus at ipsum lacinia, ultricies rutrum ligula.</p></h4>
</div>
<div class="col-lg-6">
<div class="box box-default" style="margin-top: 80px;">
<div class="box-header with-border" style="text-align: center;">
<h3 class="box-title"><i class="fa fa-group fa-5x" style="font-size: 150px; margin-top: 50px; margin-bottom: 10px"></i></h3>
</div>
<div class="box-body">
<div class="row">
<h3 style="text-align: center; font-weight: 600; margin-bottom: 20px">Login as</h3>
ADMIN<br>
SISWA
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div> <!-- NOTE: I fixed a mis-closed div here -->
</section>
Also note that I fixed a mis-closed div.
Deleted all the extra stuff, all I want is the row to float left so there is some text next to the image, but it only moves over one line. Using bootstrap if that helps, along with my own CSS file.
example
<!--main body container -->
<div class="container">
<div class="col-sm-6">
<div class="row">
<h1>About Me</h1>
</div>
<div id="bio" class="row">
<img src= "assets/images/linkedin-logo.png" alt="default photo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
</div>
</div>
<!--Main Container End-->
</div>
css code:
#bio {
float: left;
}
Float your image to the left
#bio img {
float: left;
}
Example: https://jsfiddle.net/L75dhtny/
you can try this one:
<!--main body container -->
<div class="container">
<div class="col-sm-6">
<div class="row">
<h1>About Me</h1>
</div>
<div id="bio" class="row">
<img src= "assets/images/linkedin-logo.png" alt="default photo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
</div>
</div>
<!--Main Container End-->
</div>
DEMO HERE
You can try this -
/* css code */
img {
float: left;
padding:2px;
margin-right:4px;
}
<!--main body container -->
<div class="container">
<div class="col-sm-6">
<div class="row">
<h1>About Me</h1>
</div>
<div id="bio" class="row">
<img src="http://placehold.it/350x150">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
</div>
</div>
<!--Main Container End-->
</div>
Add
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
I'm attempting to achieve the layout below using col-lg-4.
I just need to know how I can make the third column span all three rows and without creating enormous gaps of whitespace between the rows. Here's what it's currently looking like:
Is this possible to do in Bootstrap (without using the Bootstrap 2 span classes)?
Here's the code (generalized)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
<!-- THIS NEEDS TO ROW SPAN -->
<p>Praesent posuere egestas sagittis. Sed feugiat nibh urna, egestas elementum ipsum facilisis et. Nullam elit nisi, tincidunt a turpis ac, fringilla pellentesque nibh. Suspendisse pulvinar orci sit amet metus laoreet, sed tincidunt quam semper. Vestibulum
ac nunc a justo vulputate venenatis vel sit amet augue. Vestibulum eu hendrerit sem. Aenean nec tempus ipsum. Integer nec lectus varius, venenatis orci vitae, efficitur mi. Curabitur at consectetur leo, sit amet consectetur nisi. Nam nec eros
facilisis, aliquam sem molestie, auctor elit. Vivamus quis hendrerit justo, vel molestie ligula.</p>
<p>Morbi leo magna, sollicitudin a sem ac, finibus facilisis ex. Nam ut enim commodo, venenatis augue nec, consectetur velit. Sed lobortis vitae lacus at pulvinar. Aliquam vel enim tristique, lacinia nibh ut, porta dui. Fusce efficitur volutpat lectus
maximus iaculis. Proin purus odio, auctor id sollicitudin nec, lacinia vel ligula. Sed luctus ipsum non sem tincidunt mollis.</p>
<p>Pellentesque congue mauris non tempor tincidunt. Phasellus pretium at lorem ut auctor. Donec rhoncus, nibh vitae aliquam tristique, leo quam elementum nisl, at porttitor massa diam venenatis diam. Suspendisse potenti. Sed gravida, mauris nec rhoncus
feugiat, augue velit facilisis mauris, et dapibus nisl augue non nunc. Nunc pretium quam eget tincidunt sollicitudin. Etiam maximus metus eget accumsan efficitur. Fusce a lorem vitae libero blandit condimentum.</p>
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
</div>
</div>
You need to use nested col-s, in this case, use col-lg-8 + col-lg-4
and inside col-lg-8 you create nested cols using row
added col-xs-* for demo.
[class*="col-"] {
border: red dashed 1px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-lg-8">
<div class="row">
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
</div>
<div class="row">
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
</div>
<div class="row">
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
</div>
</div>
<div class="col-xs-4 col-lg-4">
Praesent laoreet purus in elementum.Praesent laoreet purus in elementum.Praesent laoreet purus in elementum. Praesent
</div>
</div>
</div>
I have simple 3 column layout with bootstrap. Each column inside has a panel.
My is goal that each panel has 100% height of it's parent and that all of the columns are same height (solved using display: flex). I tried with display table and relative/absolute positioning but nothing came up with desired result. I'd like to avoid fixed values e.g. height: 300px etc.
Thanks!
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
/* Doesn't work */
/*
.col-sm-4 {
position: relative;
}
.panel-default {
height: 100%;
position: absolute;
}
*/
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row row-eq-height">
<div class="col-sm-4" style="background: red">
<div class="panel panel-default">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique gravida ligula. Aliquam erat volutpat. Fusce quam erat, porttitor ac ante sed, tempus fringilla nisl. Phasellus sit amet orci volutpat, hendrerit metus vitae, dapibus nunc.
Phasellus eros mauris, iaculis quis massa vel, dictum sagittis mauris. Donec egestas sem venenatis vehicula facilisis. Mauris in ultrices augue. Etiam eros libero, malesuada nec luctus quis, aliquam nec massa. Fusce vitae hendrerit nibh, eget
hendrerit mauris. Aliquam quis sem ipsum. Phasellus aliquet rhoncus tellus ac imperdiet. Sed nec lacus at erat elementum efficitur vel in magna. Vestibulum ac enim id ligula iaculis ultricies at facilisis lorem. Nullam lobortis ultrices felis</div>
</div>
</div>
<div class="col-sm-4" style="background: green">
<div class="panel panel-default">
<div class="panel-body">Col 2</div>
</div>
</div>
<div class="col-sm-4" style="background: blue">
<div class="panel panel-default">
<div class="panel-body">Nullam nec ex metus. Curabitur mollis sem vitae augue ultrices ornare. Phasellus efficitur viverra turpis, nec scelerisque purus rutrum vel. Ut pellentesque congue tincidunt. Nulla et nulla velit. Quisque pellentesque mi ac metus faucibus pretium.
Duis sit amet vestibulum dolor.
</div>
</div>
</div>
</div>
</div>
This can solve the problem and avoid using fixed values e.g. height: 300px.
.row-eq-height, .row-eq-height > div[class*='col-'] {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex:1 1 auto;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row row-eq-height">
<div class="col-sm-4" style="background: red">
<div class="panel panel-default">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique gravida ligula. Aliquam erat volutpat. Fusce quam erat, porttitor ac ante sed, tempus fringilla nisl. Phasellus sit amet orci volutpat, hendrerit metus vitae, dapibus nunc.
Phasellus eros mauris, iaculis quis massa vel, dictum sagittis mauris. Donec egestas sem venenatis vehicula facilisis. Mauris in ultrices augue. Etiam eros libero, malesuada nec luctus quis, aliquam nec massa. Fusce vitae hendrerit nibh, eget
hendrerit mauris. Aliquam quis sem ipsum. Phasellus aliquet rhoncus tellus ac imperdiet. Sed nec lacus at erat elementum efficitur vel in magna. Vestibulum ac enim id ligula iaculis ultricies at facilisis lorem. Nullam lobortis ultrices felis</div>
</div>
</div>
<div class="col-sm-4" style="background: green">
<div class="panel panel-default">
<div class="panel-body">Col 2</div>
</div>
</div>
<div class="col-sm-4" style="background: blue">
<div class="panel panel-default">
<div class="panel-body">Nullam nec ex metus. Curabitur mollis sem vitae augue ultrices ornare. Phasellus efficitur viverra turpis, nec scelerisque purus rutrum vel. Ut pellentesque congue tincidunt. Nulla et nulla velit. Quisque pellentesque mi ac metus faucibus pretium.
Duis sit amet vestibulum dolor.
</div>
</div>
</div>
</div>
</div>
Fiddle
Side Note: Flex has limited browser support especially on mobile devices.