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

Question

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 1

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>