CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
user70192
user70192

Reputation: 14204

Why are my Bootstrap 4 card headers not displaying as expected?

I'm working to migrate a site from the Bootstrap 4 Alpha 6 to Bootstrap 4 Beta 1. In my cards, I'm using an icon with some right-aligned text. With the Alpha, my cards looked as desired like this:

+--------------------------------------+
| [x]                        some text |
+--------------------------------------+
| This is the content of my card. It's |
| just a block of text and it wraps    |
| several lines. Nothing special       |
| really.                              |
+--------------------------------------+

The [x] represents the position of my icon. To create this, I was using the following HTML with the Alpha code:

<div class="card">
  <div class="card-header">
    <span class="fa fa-circle"></span>
    <div class="float-xs-right">some text</div>
  </div>

  <div class="card-block">
    <div class="text-muted">article</div>
      <h5 class="card-title">Hello</h5>
      <p class="card-text">
        This is the content of my card.
        It's just a block of text and it wraps several lines.
        Nothing special really.
      </p>
    </div>
  </div>
</div>

Since moving to Bootstrap 4 beta, the header is all screwed up. The "some text" is left-aligned and on the line below the icon. I don't understand why this is happening. For that reason, I'm not sure how to fix it. I read all of the release notes and I'm still not sure what I'm missing.

Upvotes: 0

Views: 2822

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362380

There have been several changes from Bootstrap alpha to beta. As of alpha-6, the -xs- infix has been removed, so you'd simply use float-right instead of float-xs-right. Also card-block has been replaced with card-body.

<div class="card">
        <div class="card-header">
            <span class="fa fa-circle"></span>
            <div class="float-right">some text</div>
        </div>
        <div class="card-body">
            <div class="text-muted">article</div>
            <h5 class="card-title">Hello</h5>
            <p class="card-text">
                This is the content of my card. It's just a block of text and it wraps several lines. Nothing special really.
            </p>
        </div>
    </div>

https://www.codeply.com/go/YJrvySZD3O

Upvotes: 2

Related Questions