Bootstrap Card Header not sticking to the top

Q: Bootstrap Card Header not sticking to the top

<p><strong>Solution:</strong></p> <div>When you use Bootstrap 4 Card with Header and Footer, make sure you include Card Body or else, the Header and the footer won't align to their respective positions.</div> <div> </div> <div>e.g:</div> <div><strong>div class="card"</strong></div> <div><strong>div class="card-header"</strong></div> <div><strong>div class="card-body</strong></div> <div><strong>div class="card-footer</strong></div> <div> </div> <div>Remember to close your divs and test your code<br /><br /><strong>[NB]</strong> If you want to align the div column to the bottom of the parent div using bootstrap4 follow the instruction below:<br />1. Make the parent div display<strong> flex</strong>, <strong>specify flex-column</strong>, then specify <strong>justify-content-between</strong> this will push all items inside the parent div to the position at the start and end of the parent div.</div>

Question

Accepted Answer

Solution:

When you use Bootstrap 4 Card with Header and Footer, make sure you include Card Body or else, the Header and the footer won't align to their respective positions.

e.g:

div class="card"

div class="card-header"

div class="card-body

div class="card-footer

Remember to close your divs and test your code

[NB] If you want to align the div column to the bottom of the parent div using bootstrap4 follow the instruction below:
1. Make the parent div display flex, specify flex-column, then specify justify-content-between this will push all items inside the parent div to the position at the start and end of the parent div.

Bootstrap Card Header not sticking to the top

How to read an Email Header

How to read an Email Header

Front-End Bootstrap Development Notes Tips and Tri

Front-End Bootstrap Development Notes Tips and Tricks in MVC Asp.Net Core 7

$(...).modal is not a function

$(...).modal is not a function

[Bootstrap Padding Not working] pl-lg-4 not workin

[Bootstrap Padding Not working] pl-lg-4 not working

how to solve 401 unauthorized error in postman

how to solve 401 unauthorized error in postman

How to Hide a Div on a Small Screen using Boostrap

How to Hide a Div on a Small Screen using Boostrap 5

JsonException: The JSON value could not be convert

JsonException: The JSON value could not be converted to System.Boolean. Path: $[0].IsLiveArticle | LineNumber: 0 | BytePositionInLine: 878.

Why is HttpContext Header Empty when trying to ret

Why is HttpContext Header Empty when trying to retrieve Header Information in MVC

Drupal 8 Bootstrap 4 Not Loading CSS Files

Drupal 8 Bootstrap 4 Not Loading CSS Files

GitHub Extension for Visual Studio not appearing i

GitHub Extension for Visual Studio not appearing in Visual Studio 2019

Lazy Loading Error Cannot read property 'fn' of un

Lazy Loading Error Cannot read property 'fn' of undefined

Solved!! Asset was not declared to be precompiled

Solved!! Asset was not declared to be precompiled in production. Ruby on Rails Development.

Bootstrap 4 and Boostrap 5 Cards of same height in

Bootstrap 4 and Boostrap 5 Cards of same height in columns

Error: The type or namespace UI does not exist in

Error: The type or namespace UI does not exist in the namespace Microsoft.AspNetCore.Identity bootstrap dotnet core 3.0