I am currently in the process of upgrading a website from Bootstrap 4 Alpha 6 to Bootstrap 4 Beta 1. Within my cards, there is an icon accompanied by some right-aligned text. In the Alpha version, my cards appeared exactly as I wanted them to:
+--------------------------------------+
| [x] some text |
+--------------------------------------+
| This is the content of my card. It's |
| just a block of text that spans |
| multiple lines. Nothing particularly |
| unique about it. |
+--------------------------------------+
The [x] symbolizes the position of my icon. In order to achieve this layout, the HTML code I used with the Alpha version was as follows:
<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 that wraps across several lines.
Nothing particularly unique about it.
</p>
</div>
</div>
</div>
However, upon switching to Bootstrap 4 Beta, the alignment in the header got all messed up. The "some text" now appears left-aligned and on the line below the icon. I am confused as to why this change has occurred and am unsure how to rectify it. Despite having gone through all the release notes, the solution still eludes me.