Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 -->
like image 790
random_user_0891 Avatar asked Dec 13 '17 17:12

random_user_0891


People also ask

How do I change the width of a bootstrap card?

Controlling Bootstrap Card Component Width and Height Normally, the height of the card will be adjusted to vertically fit the content of the card, but we can also control it using custom CSS (for example, style=" height: 10rem;" ) or Bootstrap's sizing utilities (for examle, <div class="card h-200"> ).

How do I make bootstrap cards the same height and width?

To get it to the same height, add Bootstrap class h-100 to all the cards or use CSS height.

What is the default margin for bootstrap cards?

They have no margin by default, so use spacing utilities as needed. Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various sizing options.


1 Answers

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>
like image 154
Zim Avatar answered Sep 25 '22 20:09

Zim