CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Nikita Gupta
Nikita Gupta

Reputation: 857

Bootstrap 4 cards column into 2 rows

I'm trying to arrange 2 columns instead of 3 columns. I understand I can use CSS to overwrite and get 2 columns like shown below but I'm wondering if there's a bootstrap method out of the box:

.card-columns {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

This is HTML:

<div class="card-columns">
  <div class="card">
    <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card This is a longer card This is a longer card This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
</div>

CSS:

.card {
  padding: 15px;
}

DEMO: https://jsfiddle.net/no8z36sc/

Upvotes: 0

Views: 5691

Answers (4)

webmatrix
webmatrix

Reputation: 122

You can achieve it using CSS grid layout easily. To adjust the number of columns set NO_OF_COLUMNS as per your requirement in CSS property grid-template-columns: repeat(NO_OF_COLUMNS, 1fr);

.card {
      padding: 15px;
      height: auto;
      display: flex;
 }

.card-columns{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 1fr;
      grid-column-gap: 20px;
      grid-row-gap: 10px;
      overflow: hidden;
}

For more information, you can refer to https://alligator.io/css/css-grid-layout-fr-unit/

JS-Fiddle Demo : https://jsfiddle.net/xskrtfgq/

Upvotes: 0

Tharun Gnanaselvam
Tharun Gnanaselvam

Reputation: 54

1) Rename your 'card-columns' class with 'row' class.

2) Add 'col-3' class for all card div.

Your code should look like this,

<div class="row">
  <div class="card col-3">
    <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card This is a longer card This is a longer card This is a longer card</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card</p>
  </div>
</div>

Upvotes: 1

Fareed Khan
Fareed Khan

Reputation: 2923

Uptil now there does not exist any Bootstrap class which are used for column-count css property

This issue was raised back in 2017 on Github but still bootstrap has no such feature of arranging columns with the help of the classes

Yet there is a solution of this without using CSS. Since developers building features that are required in bootstrap

For example you cannot set width for small devices like this: w-sm-75 or on medium devices like this w-md-50

Bootstrap width property can only be used like w-75 or w-100 and so on.

There exist an external stylesheet CDN link that works with bootstrap, which is currently in development mode and constantly including features based on developers need's

With the help of this sheet you can set width for different devices

w-sm-50 w-md-100 w-50

It also contain column-count property in it using class like car-col-2

car is defining card

col is defining the number of columns

2 is defining how many number of columns you want, right now it has range from 1 to 6

So this is how your work will look like if you use car-col-2 css class

One important thing: This feature haven't been introduced with different devices yet.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<!-- Stylesheet for card-columns-count and for some other features currently in development mode -->
<link rel="stylesheet" href="https://drive.google.com/uc?id=1jLrfISsLUcRiwgNl0koSfsS6lylj0E7h">




<div class="card-columns car-col-2">
  <div class="card">
    <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card This is a longer card This is a longer card This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
</div>

JSFIDDLE: https://jsfiddle.net/urqf0e61/

Upvotes: 0

Ahsan Nadeem
Ahsan Nadeem

Reputation: 78

As i understand from your question you are trying to show 2 cards in a single row, try this

 <div class="row">
       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
          <div class="card">
           <p>This is a longer card with supporting text below as a natural lead-in to 
              additional content. This content is a little bit longer.
           </p>
          </div>
       </div>
       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
          <div class="card">
           <p>This is a longer card with supporting text below as a natural lead-in to 
              additional content. This content is a little bit longer.
           </p>
          </div>
       </div>
     </div>

Upvotes: 0

Related Questions