0

Basically I want a card/tile Layout. I tried the Card-Columns examples of Bootstrap 4 and this is what came out:

<main role="main" class="container-fluid free">
  <div class="card-columns">
    <div class="card" style="width:60%;">
      <div class="card-body">
        <h5 class="card-title">Test1</h5>
        <p class="card-text">test</p>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Test2</h5>
      </div>
    </div>
  </div>
</main><!-- /.container -->

Now i want to remove the space between the two Cards on the Page. Is this possible in Bootstrap via cards? It is very important that i can have a tile layout with custom card-widths.

Here is a link to a fiddle: JSFiddle Thanks in advance.

Varsha Dhadge
  • 1,711
  • 14
  • 23
y00
  • 1
  • 2

1 Answers1

1

Try this

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<main role="main" class="container-fluid free">
 
  <div class="card-columns row">
   <div class="col">
   <div class="card">
      <div class="card-body">
        <h5 class="card-title">Test1</h5>
        <p class="card-text">test</p>
      </div>
    </div>
  </div>
    <div class="col">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Test2</h5>
      </div>
    </div>
    </div>
    
  </div>
</main>
<!-- /.container -->
Varsha Dhadge
  • 1,711
  • 14
  • 23
  • Thank you for your answer. I guess this works only for cards/cols with equal heights. Because if the card-column wraps to the next line there is space between the rows. – y00 Sep 24 '18 at 11:57