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

user_3837293 0
Viewed 3314

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?

bootstrap-4 twitter-bootstrap css
3 Answers

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>
user_84650230 
<div class="row 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>

This will work for you.

user_67311110

I have the same issue with adding Form inside Card in Bootstrap. Here is my implementation.

From the original bootstrap standard form implementation: 

<form action="/action_page.php">
<div class="form-group">
  <label for="email">Email:</label>
  <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</form>

I need to adjust it to this to work:

<form action="/action_page.php">
<div class="row">
  <label for="email" class="col-md-2">Email:</label>
  <input type="email" class="form-control col-md-10" id="email" placeholder="Enter email" name="email">
</div>  
</form>

I need to change form-group class to row class to make sure form-horizontal class should work fine inside the card of bootstrap.

user_65428960
Related