Sasa1234 Sasa1234 - 24 days ago 6
CSS Question

Why col-md not working on inside card in bootstrap 4?

Please note that I am a developer, not a designer.

I need to separate card div for two columns in desktop mode. I mean "This should be in Left Side" should be display on left side and "This should be on right side" should be display on right side.

I use following HTML.

<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-block">
<div class="col-md-4">
This should be in Left Side
</div>
<div class="col-md-8">
This should be on right side
</div>

</div>
</div>


If you want to test online here is the jsfiddle (https://jsfiddle.net/uxfjwhpc/1/).

What is my mistake and how to correct it?

Answer Source

The classes col-* works when they are wrapped under row class. You can find the updated code below for card-block div. Hope this helps.

<div class="card-block">
  <div class="row">
    <div class="col-md-4">
      This should be in Left Side
    </div>
    <div class="col-md-8">
      This should be on right side
    </div>
  </div>
</div>