CODEWITHSUNDEEP
csstwitter-bootstrapalignment
xTheWolf
xTheWolf

Reputation: 1886

Bootstrap Cards, show 2 of them in a row

enter image description here

This is how it looks when I have some cards beneath each other by using:

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

What did I miss out on CSS in order for them to not look this weird, but adapt? I want to have it aligned like this: enter image description here

Upvotes: 0

Views: 5821

Answers (2)

Mohammed Ezzedine
Mohammed Ezzedine

Reputation: 56

I would suggest the following:

.cards-container {
  column-count: 2;
}

.cards-container div {
   background: floralwhite;
   height: 50px;
   margin: 10px 0;

   // to avoid column breaks
   -webkit-column-break-inside: avoid;
   page-break-inside: avoid;
   break-inside: avoid;
}

.cards-container div:first-child {
    margin: 0;
}
<div class="cards-container">
<div class="col-md-6">
    stuff
</div>
<div class="col-md-6">stuff</div>
<div class="col-md-6">stuff</div>
<div class="col-md-6">stuff</div>
</div>

Upvotes: 1

Abhay Naik
Abhay Naik

Reputation: 405

Please check this fiddle

HTML Structure: 

<div class="container">
<div class="row">
    <div class="col-xs-6 col">
        stuff
    </div>
    <div class="col-xs-6 col col1">stuff</div>
    <div class="col-xs-6 col col1">stuff</div>
    <div class="col-xs-6">stuff</div>
</div>


.row > div {
    background: lightgrey;
    border: 1px solid grey;
}

.col{
    height:100px;
}

.col.col1{
    height:50px;
}

PS: You can replace 'xs' with 'md' for desktop.

Upvotes: 0

Related Questions