-1
I am creating a screen with bootstrap that will have several items panel But the way I did, it only fits well on the screen if the content is the same height, something that will not always happen, as in the example. How to fix this?
<div class="row">
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Titulo XYZ 1
</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Titulo XYZ 2
</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Titulo XYZ 3
</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Titulo XYZ 4
</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Titulo XYZ 5
</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Titulo XYZ 6
</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
</div>
</div>
</div>
</div>
Follow the example running on jsfiddle
Why is the downvote?
– Marcelo Diniz
What would be your adjusted screen? A suggestion that can give and change the bootstrap class from class="col-Xs-6" to class="col-Xs-12". But it depends on how you want to adjust. One down the other? Side by Side? etcs. Obs: It wasn’t me who downvoted XD
– Marcos Marques
So you have to have the two columns, like this one in the image, but if panel 2 is smaller than 1, then 3 is under 2, so far so good, as long as 4 came just under 1 and not as large as this
– Marcelo Diniz