Twitter Bootstrap Question posted in

Bootstrap4 make card headers the same height-Twitter bootstrap

Using Bootstrap 4’s pricing template as an example, suppose I have card headers of different text length such that under some screen resolution the height of the card headers become different. I want to ensure that they are always of the same height.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">This is a really long header that is going to cause problem.</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
      </div>
    </div>
    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Pro</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>20 users included</li>
          <li>10 GB of storage</li>
          <li>Priority email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
      </div>
    </div>
    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Enterprise</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>30 users included</li>
          <li>15 GB of storage</li>
          <li>Phone and email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
      </div>
    </div>
  </div>

The only way I can make this work is to do something like

.card-header{height: 50px;}

In CSS but this does not allow dynamic resizing. Any help is greatly appreciated. Here’s the Codepen.

Tags:

5

Answers


  1. 0

    There is only one solution is using text-overflow property. in bootstrap, you can use .text-truncate class. it truncates your header text.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <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>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
      </div>
    </div>
    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal text-truncate">Pro</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>20 users included</li>
          <li>10 GB of storage</li>
          <li>Priority email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
      </div>
    </div>
    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal text-truncate">Enterprise</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>30 users included</li>
          <li>15 GB of storage</li>
          <li>Phone and email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
      </div>
    </div>
  </div>

    you can also give title attribute to your h1 and set header text to it so user can show full text on hover

    Login or Signup to reply.
  2. 0

    You can simply add flex property to achieve that. Here is the example:

    .card-header{
    display: flex;             
    height: 100%;
    align-items: center;
    justify-content: center;

}
  h4{
    flex: 1;
  }

    Here is the Pen

    Login or Signup to reply.
  3. 0

    In Bootstrap-4, use these classes for the cards’ header.

    1. d-flex – to change its display to flex
    2. align-items-center – center its content vertically
    3. justify-content-center – center its content horizontally
    4. h-100 – to make its height 100%
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 box-shadow">
      <div class="card-header d-flex align-items-center justify-content-center h-100">
        <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>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
      </div>
    </div>
    <div class="card mb-4 box-shadow">
      <div class="card-header d-flex align-items-center justify-content-center h-100">
        <h4 class="my-0 font-weight-normal flex-grow-1 ">Pro</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>20 users included</li>
          <li>10 GB of storage</li>
          <li>Priority email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
      </div>
    </div>
    </div>
  </div>

    I recommend you use the latest version of bootstrap and check this codepen

    Update

    If one of the cards has less content in its body, its header has more height. Add these classes to all the card bodies to fix the issue.

    1. flex-column – to change its flex-direction to column
    2. h-100 – to make its height 100%
    <div class="card-body flex-column h-100">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 box-shadow">
      <div class="card-header d-flex align-items-center justify-content-center h-100">
        <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>
      </div>
      <div class="card-body flex-column h-100">
        <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
            <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
      </div>
    </div>
    <div class="card mb-4 box-shadow">
      <div class="card-header d-flex align-items-center justify-content-center h-100">
        <h4 class="my-0 font-weight-normal flex-grow-1 ">Pro</h4>
      </div>
      <div class="card-body flex-column h-100">
        <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>20 users included</li>
          <li>10 GB of storage</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
      </div>
    </div>
    </div>
  </div>

    Check this codepen

    Login or Signup to reply.
  4. 0

    This may be late, but, hopefully it helps. I had a similar issue and I solved it by adding ‘&nbsp;‘ 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.

    Login or Signup to reply.
  5. 0

    This may be late too, but, hopefully it helps.

    $(document).ready(function() {
  var x = 0;
  $(".card-deck .card-header, .card-deck .card-footer").each(function(id, it) {
    if ($(it).height() > x) {
      x = $(it).height();
    }
  }).height(x);
});

    Codepen

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search