mahan :
In Bootstrap-4, use these classes for the cards' header.\n\n\nd-flex - to change its display to flex\nalign-items-center - center its content vertically \njustify-content-center - center its content horizontally \nh-100 - to make its height 100%\n\n\n\r\n\r\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css\" rel=\"stylesheet\"/>\r\n<div class=\"container\">\r\n <div class=\"card-deck mb-3 text-center\">\r\n <div class=\"card mb-4 box-shadow\">\r\n <div class=\"card-header d-flex align-items-center justify-content-center h-100\">\r\n <h4 class=\"my-0 font-weight-normal flex-grow-1\">This is a really long header that is going to cause problem. You can add more and more words but height will be the same! This is a really long header that is going to cause problem. You can add more and more words but height will be the same!</h4>\r\n </div>\r\n <div class=\"card-body\">\r\n <h1 class=\"card-title pricing-card-title\">$0 <small class=\"text-muted\">/ mo</small></h1>\r\n <ul class=\"list-unstyled mt-3 mb-4\">\r\n <li>10 users included</li>\r\n <li>2 GB of storage</li>\r\n <li>Email support</li>\r\n <li>Help center access</li>\r\n </ul>\r\n <button type=\"button\" class=\"btn btn-lg btn-block btn-outline-primary\">Sign up for free</button>\r\n </div>\r\n </div>\r\n <div class=\"card mb-4 box-shadow\">\r\n <div class=\"card-header d-flex align-items-center justify-content-center h-100\">\r\n <h4 class=\"my-0 font-weight-normal flex-grow-1 \">Pro</h4>\r\n </div>\r\n <div class=\"card-body\">\r\n <h1 class=\"card-title pricing-card-title\">$15 <small class=\"text-muted\">/ mo</small></h1>\r\n <ul class=\"list-unstyled mt-3 mb-4\">\r\n <li>20 users included</li>\r\n <li>10 GB of storage</li>\r\n <li>Priority email support</li>\r\n <li>Help center access</li>\r\n </ul>\r\n <button type=\"button\" class=\"btn btn-lg btn-block btn-primary\">Get started</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>",
2018-05-17T14:06:45
patelarpan :
There is only one solution is using text-overflow property. in bootstrap, you can use .text-truncate class. it truncates your header text.\n\n\r\n\r\n<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css\" integrity=\"sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4\" crossorigin=\"anonymous\">\r\n<div class=\"container\">\r\n <div class=\"card-deck mb-3 text-center\">\r\n <div class=\"card mb-4 box-shadow\">\r\n <div class=\"card-header\">\r\n <h4 class=\"my-0 font-weight-normal text text-truncate\" title=\"This is a really long header that is going to cause problem.\">This is a really long header that is going to cause problem.</h4>\r\n </div>\r\n <div class=\"card-body\">\r\n <h1 class=\"card-title pricing-card-title\">$0 <small class=\"text-muted\">/ mo</small></h1>\r\n <ul class=\"list-unstyled mt-3 mb-4\">\r\n <li>10 users included</li>\r\n <li>2 GB of storage</li>\r\n <li>Email support</li>\r\n <li>Help center access</li>\r\n </ul>\r\n <button type=\"button\" class=\"btn btn-lg btn-block btn-outline-primary\">Sign up for free</button>\r\n </div>\r\n </div>\r\n <div class=\"card mb-4 box-shadow\">\r\n <div class=\"card-header\">\r\n <h4 class=\"my-0 font-weight-normal text-truncate\">Pro</h4>\r\n </div>\r\n <div class=\"card-body\">\r\n <h1 class=\"card-title pricing-card-title\">$15 <small class=\"text-muted\">/ mo</small></h1>\r\n <ul class=\"list-unstyled mt-3 mb-4\">\r\n <li>20 users included</li>\r\n <li>10 GB of storage</li>\r\n <li>Priority email support</li>\r\n <li>Help center access</li>\r\n </ul>\r\n <button type=\"button\" class=\"btn btn-lg btn-block btn-primary\">Get started</button>\r\n </div>\r\n </div>\r\n <div class=\"card mb-4 box-shadow\">\r\n <div class=\"card-header\">\r\n <h4 class=\"my-0 font-weight-normal text-truncate\">Enterprise</h4>\r\n </div>\r\n <div class=\"card-body\">\r\n <h1 class=\"card-title pricing-card-title\">$29 <small class=\"text-muted\">/ mo</small></h1>\r\n <ul class=\"list-unstyled mt-3 mb-4\">\r\n <li>30 users included</li>\r\n <li>15 GB of storage</li>\r\n <li>Phone and email support</li>\r\n <li>Help center access</li>\r\n </ul>\r\n <button type=\"button\" class=\"btn btn-lg btn-block btn-primary\">Contact us</button>\r\n </div>\r\n </div>\r\n </div>",
2018-05-17T09:06:44
Shihab :
You can simply add flex property to achieve that. Here is the example:\n\n.card-header{\n display: flex; \n height: 100%;\n align-items: center;\n justify-content: center;\n\n}\n h4{\n flex: 1;\n }\n\n\nHere is the Pen",
2018-05-17T10:36:49
Ask :
This may be late, but, hopefully it helps. I had a similar issue and I solved it by adding ' ' fillers to make the shorter header relatively the same length as the others and it appears to have worked. The header height now appears the same across every screen size, though I am using only the 'card-header' class in the card headers. ",
2018-10-15T07:42:54