CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
random_user_0891
random_user_0891

Reputation: 2051

bootstrap 4 cards width

I cant seem to get a card to stretch across the whole width of a col-md-6 column unless there is enough text in the card to push it to full width. However, I would like it to be full width of the col-md-6 column even with no text.

If I uncomment that <p> tag then it fits the width perfectly, but I need to make it full width even with little to no text.

<div class='col-md-6 jobs_index_middle_panels'>
      <div class="row">

            
  <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
      <!--<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>-->

    </div>
  </div>        


    </div> <!--/.row -->
 </div> <!-- ./col-md-6 -->

Upvotes: 7

Views: 33637

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362280

The card should be directly inside the col-*, and the col-* should be inside the .row...

https://www.codeply.com/go/tBl8MZOn7i

  <div class="row">
        <div class="col-md-6 jobs_index_middle_panels">
            <div class="card">
                <div class="card-block">
                    <h4 class="card-title">Card title</h4>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>

                </div>
            </div>
        </div>
  </div>

Upvotes: 9

Related Questions