I'm trying to re-create this panel:
I just wondered if anyone knows how I can go about this , I have my html markup done. But I have no idea how I would begin to style it..
My example html:
<div id="mainContainer" class="container">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">Item 01</div>
<div class="panel-body"><img src="http://placehold.it/150x150" alt="" class="img-responsive center-block" />
</div>
</div>
</div>
</div>
Check this out this will help you....
.my_panel > .panel-body {
padding: 0px;
}
.my_panel > .panel-body > img {
width: 100%;
height: 100%;
}
.my_panel > .panel-footer {
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="mainContainer" class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="panel panel-default my_panel">
<div class="panel-body">
<img src="http://placehold.it/150x150" alt="" class="img-responsive center-block" />
</div>
<div class="panel-footer">
<h3>The company</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, voluptas, sunt vitae mollitia iure perferendis rerum odio! Natus, cupiditate, est, quas, non perspiciatis in quo possimus eos voluptas tempore maxime.</p>
Read More
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
Is is possible to create a slider that would "overflow" parent elements and body?
The idea would be to have content of section inside a container.
Slider would also be a part of that section but the slides would overflow parent element and body.
Vertical scroll would be wide as container but you could see slides outside of the container.
h2{
text-align: center;
}
.container{
margin: 0 auto;
max-width:460px;
border: 2px solid #ef34ed
}
.slider{
display: flex;
align-items: center;
jusify-content: flex-start;
overflow-x: scroll;
}
.slide + .slide {
margin-left: 50px;
}
.slide{
text-align: center;
}
<div class="section">
<div class="container">
<div class="row">
<h2>Some title</h2>
<div class="slider">
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
<p>Name</p>
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
<p>Name</p>
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
<p>Name</p>
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
</div>
</div>
<p>
Magna phaedrum electram pro an. Te nec delectus temporibus, omittantur ullamcorper ne pri. Pri ad affert urbanitas, laboramus eloquentiam pri ad. Purto summo interpretaris eam et, brute dolore ut eam, illud dolore putent et vim. Ei sed aliquip iudicabit, te fabulas menandri sed.
</p>
</div>
<div>
</div>
Hope this is what you are looking for.
h2{
text-align: center;
}
.container{
margin: 0 auto;
max-width:460px;
border: 2px solid #ef34ed;
overflow: visible;
}
.slider{
display: flex;
align-items: center;
justify-content: flex-start;
overflow-x: scroll;
padding:0 calc(calc(100vw - 460px)*0.5);
margin:0 calc(calc(100vw - 460px)*-0.5);
}
.slide + .slide {
margin-left: 50px;
}
.slide{
text-align: center;
}
<div class="section">
<div class="container">
<div class="row">
<h2>Some title</h2>
<div class="slider">
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
<p>Name</p>
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
<p>Name</p>
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
<p>Name</p>
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
</div>
</div>
<p>
Magna phaedrum electram pro an. Te nec delectus temporibus, omittantur ullamcorper ne pri. Pri ad affert urbanitas, laboramus eloquentiam pri ad. Purto summo interpretaris eam et, brute dolore ut eam, illud dolore putent et vim. Ei sed aliquip iudicabit, te fabulas menandri sed.
</p>
</div>
<div>
</div>
I'm trying to layer the top row of cards on top of the header using z-index on a project using Materialize CSS. Since the cards are now using relative positioning, it causes some of them to move when the card-action is hovered upon (the result is less visible on mobile view since there's only one card per row). I also didn't intend on the card-action text moving to the center when hovered, though I'm okay with that effect. I've tried using absolute positioning as well as changing which element the positioning is applied to. How can I prevent the cards from shifting and still use z-index? Here is my code and link to my (codepen):
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400&display=swap');
:root {
--primary-color: #c31432;
--primary-text-color: rgba(0,0,0,0.5);
--primary-text: "Open Sans", sans-serif;
}
* {
font-family: "Open Sans", sans-serif;
font-weight: 400;
}
#works-header {
position: absolute;
height: 500px;
width: 100vw;
z-index: 10;
}
#works-header h1 {
font-size: 3rem;
letter-spacing: 1px;
margin: 0 auto;
}
#cards {
position: relative;
top: 400px;
z-index: 1000;
}
.card-image {
cursor: pointer;
transition: all .3s ease;
}
.card-image:hover {
border: 3px solid var(--primary-color);
opacity: 0.85;
}
.card-image:hover .card-title {
display: none;
}
.card-action {
width: 50%;
cursor: pointer;
font-size: 1.2rem;
transition: all .3s ease;
}
.card-action:hover {
width: 100%;
position: absolute; /* this prevents cards from shifting due to relative positioning on the card element */
opacity: 0.7;
border-bottom: 2px solid var(--primary-color);
}
.card-tags {
display: none;
}
.card-image:hover .card-tags {
display: block;
position: absolute;
left: 1rem;
bottom: 2rem;
letter-spacing: 2px;
font-weight: 300;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<!-- Todos: fix all cards aligned on the right side (card-action does not work properly) -->
<section class="center" id="works">
<div id="works-header" class="black valign-wrapper">
<h1 class="white-text center-align">Check out some of my latest projects</h1>
<p></p>
</div>
<div class="container row" id="cards">
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
</div>
</div>
</section>
One solution is to add a border to card-image, so that you are transitioning just the opacity and color, and not the border size (which in turn recalculates the size of the image and causes the flicker). It's a lot for the browser to process all at once.
.card-image {
cursor: pointer;
transition: all .3s ease;
border: 3px solid black;
}
Codepen.
EDIT:
Sorry, I realised there were two issues.
Ok so you don't need absolute positioning on the header - absolute takes items out of the flow of the page. No need to do that here. Take off the relative from the cards and use a negative margin:
#cards {
top: 400px;
z-index: 1000;
margin-top: -100px;
}
I've removed the absolute positioning from the hover as it's not a good idea. Absolute positioning comes into it's own when you need to finely control an elements positioning. No need for that here. I've also taken the 50% width off and added a default border to prevent flicker on the card action.
The main reason it's happening - because of the border on hover. If you really need this look - add empty div inside card-image and add inset box-shadow for it.
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
<div class="hover-shadow"></div>
</div>
and for CSS:
.card-image .hover-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card-image:hover .hover-shadow {
box-shadow: inset 0 0 0 2px (--primary-color);
}
Full example at codepen
I am trying to use Bootstrap carousel in my website but I am not able to center the content in the carousel. I've tried using Grid but that didn't work out well. How can I solve this problem? Please take a look at my code and the image that has been provided below. I haven't used any CSS yet for the carousel.
<section class="services-about">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card-columns">
<div class="card card-effects">
<img src="./resources/images/data.png" alt="" class="img-fluid card-img-top mx-5"
style="height: 10%; width: 15%;">
<div class="card-body">
<h3 class="card-title text-center" style="color: #686868 !important;">
WEB DEVELOPMENT
</h3>
<hr style="border: .01px solid #333 !important;">
<p class="card-text text-center"
style="color: rgba(255,255,255,.755) !important;">Lorem
ipsu dolor sit amet consectetur adipisicing
elit.
Consequatur perspiciatis quas exercitationem natus? Magnam molestiae
unde
praesentium, quidem soluta incidunt enim dolore veritatis at quis
molestias
corporis
quod inventore porro!</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card-columns">
<div class="card card-effects">
<img src="" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h3 class="card-title text-center" style="color: #686868 !important;">
MARKETING</h3>
<hr style="border: .01px solid #333 !important;">
<p class="card-text text-center"
style="color: rgba(255,255,255,.755) !important;">
Lorem
ipsum dolor sit amet consectetur adipisicing
elit.
Consequatur perspiciatis quas exercitationem natus? Magnam molestiae
unde
praesentium, quidem soluta incidunt enim dolore veritatis at quis
molestias
corporis
quod inventore porro!</p>
</div>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<div class="carousel-item">
</div>
<div class="carousel-item">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
Please check this image to see the carousel problem
You should be able to use position to do that.
If you add:
.carousel-item {
position: relative;
}
.card {
position: absolute;
left: 50%;
top: 50%;
transform: translate(50%, 50%);
}
Your content should get centered in the middle of the slide. :)
Try the below one.. add style="margin:auto" to card
<div class="card" style="width:400px; margin:auto;">
<div class="carousel-caption">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
See Profile
</div>
</div>
</div>
Since you are using bootstrap classes:
Trying using d-flex justify-content-center align-items-center on parent div element.
Also, I strongly suggest you stop using css inline styling and put your css into a separate file.
In my reactjs component I am returning this in the render():
<div className='col-lg-4'>
<div className="col-lg-3">
<img src={this.props.details.avatar} alt=""/>
</div>
<div className="col-lg-9 text">
<div>
{this.props.details.firstName}
{this.props.details.lastName}
{this.props.details.bio.slice(0,80)}
</div>
</div>
</div>
Currently the this.props.details.bio which contains text overflows into the image. Which css rule can fix this issue? At the moment I have:
.text{
padding:5px;
}
Here is a jsFiddle
The natural size of your image is larger than the bootstrap class that contains it. So what appears like the text bleeding into the image is really the image extending beyond the boundaries of its parent.
To force the image to obey the size of its parent, add this to your CSS:
img {
width: 100%;
height: auto;
}
Please give img-reponsive class in img tag and put col-md and col-sm class. Now img and its description come side by side till 768 screen resolution after that it is in full width.
body {
margin: 10px;
}
.main {
border: 1px solid black;
background-color: lightgrey;
margin: 10px 10px !important;
}
.text {
padding: 5px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">
<div>
<div>
<div class="row main">
<h1>Boyer - Botsford</h1>
<h3 class="col-lg-6">clicks-and-mortar scale infomediaries</h3>
<h3 class="col-lg-6 text-right">Since Sat Nov 25 2017 16:55:29 GMT+1100 (AEDT)</h3>
</div>
<div class="row">
<div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/buryaknick/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>DylanMacdonaldAssumenda doloribus ut dolore eaque autem. Sit rem similique cum modi qui. Qui m</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/abdullindenis/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>IsabelRolfsonDicta explicabo pariatur et placeat enim. Dignissimos similique in nesciunt aut </div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/andytlaw/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>AnthonyCartwrightSint cum corrupti similique laudantium nesciunt aliquam sint aperiam. Id consequ</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/longlivemyword/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>LukeWestConsequatur excepturi tempore iste ipsam et architecto animi explicabo. Magnam s</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/dnirmal/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>MaxDietrichQuo dolorum et est facere nihil similique repudiandae. Recusandae ratione enim d</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/marosholly/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>AlexanderErnserSit quo dignissimos molestiae quasi ut dolor. Et et quaerat assumenda laborum ea</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/areus/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>AlyssaDanielDolor est id. Officiis aut odio molestiae ut quaerat quae vero ipsa. Voluptatem </div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/alagoon/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>KaiHayesNobis ea ut distinctio nam et suscipit velit. Necessitatibus exercitationem blan</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bertboerland/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>IsabelleClarkeVel velit repellat dicta. Maxime occaecati sed dolorum et modi. Voluptates rerum</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/drewbyreese/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>HaydenWilliamsAt vel voluptatibus rerum ex aut porro. Quis dolorem qui dolorum eveniet a facer</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/markwienands/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>AbigailBorerDoloribus illum nam modi consequuntur unde et et a rerum. Laboriosam quis quod. </div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/okandungel/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>HamishMclaughlinSapiente aliquam consequatur doloribus occaecati dolorem perferendis qui aliquid</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
I have some div panels, and after each one there is a gap on the left, when the column on the right is bigger than the last.
How can I make it come under each one (like pinterest)
JSFiddle Example
<div class="row">
<div class="col-xs-6">
<div class=" panel">
<div class="panel-body">
<h4>First Cell</h4>
</div>
</div>
</div>
<div class="col-xs-6">
<div class=" panel">
<div class="panel-body">
<h4>Second Cell</h4>
<h4>Second Cell</h4>
<h4>Second Cell</h4>
</div>
</div>
</div>
<div class="col-xs-6">
<div class=" panel">
<div class="panel-body">
<h4>Third Cell</h4>
</div>
</div>
</div>
<div class="col-xs-6">
<div class=" panel">
<div class="panel-body">
<h4>Third Cell</h4>
<h4>Third Cell</h4>
<h4>Third Cell</h4>
</div>
</div>
</div>
<div class="col-xs-6">
<div class=" panel">
<div class="panel-body">
<h4>Third Cell</h4>
<h4>Third Cell</h4>
<h4>Third Cell</h4>
</div>
</div>
</div>
You can make it (like Pinterest) in another way like this:
JsFiddle DEMO
*, *:before, *:after {box-sizing: border-box !important;}
.row {
-moz-column-width: 18em;
-webkit-column-width: 18em;
-moz-column-gap: 1em;
-webkit-column-gap:1em;
}
.item {
display: inline-block;
padding: .25rem;
width: 100%;
}
.well {
position:relative;
display: block;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="item">
<div class="well">
<h4>First Cell</h4>
</div>
</div>
<div class="item">
<div class="well">
<h4>Second Cell</h4>
<h4>Second Cell</h4>
<h4>Second Cell</h4>
</div>
</div>
<div class="item">
<div class="well">
<h4>Third Cell</h4>
<h4>Third Cell</h4>
</div>
</div>
<div class="item">
<div class="well">
<h4>Third Cell</h4>
<h4>Third Cell</h4>
<h4>Third Cell</h4>
</div>
</div>
<div class="item">
<div class="well">
<h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid laudantium veritatis expedita optio aperiam modi, odit eius
</h4>
</div>
</div>
<div class="item">
<div class="well">
<h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</h4>
</div>
</div>
</div>
</div>