Menu
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 -->
790
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"> ).
To get it to the same height, add Bootstrap class h-100 to all the cards or use CSS height.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
