CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Amine
Amine

Reputation: 941

How to fix text not showing up in the right?

i'm trying to get text to be positioned to the right of a card header, this working example on fiddle strangely doesn't work in my project, i'm using bootstrap 4

https://jsfiddle.net/LL0qnnxm/61/

This is what i get on my app

enter image description here

The corresponding code:

<div class="col">
     <div class="card">
       <!--CARD HEADER-->
       <h4 class="card-header">HEADER <small class="float-sm-right">right aligned</small></h4>
       <!--CARD BODY-->
       <div class="card-body">
       </div>
     </div>
   </div>
 </div>

Thanks for your time.

Upvotes: 3

Views: 449

Answers (2)

Aniket G
Aniket G

Reputation: 3512

When you have float-sm-right, it will only float to the right if your screen is sm size (768px and up). Simply remove the -sm.

https://jsfiddle.net/g9nu8f7d/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

  <div class="row">
    <div class="col">
      <div class="card">
        <!--CARD HEADER-->
        <h4 class="card-header">HEADER <small class="float-right">right aligned</small></h4>
        <!--CARD BODY-->
        <div class="card-body">
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <div class="card">
        <!--CARD HEADER-->
        <h4 class="card-header">HEADER <small class="float-right">right aligned</small></h4>
        <!--CARD BODY-->
        <div class="card-body">
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <div class="card">
        <!--CARD HEADER-->
        <h4 class="card-header">HEADER <small class="float-right">right aligned</small></h4>
        <!--CARD BODY-->
        <div class="card-body">
        </div>
      </div>
    </div>
  </div>

</div>

Upvotes: 1

Mark
Mark

Reputation: 2071

It's likely that you have a style which makes card-header width only as large as its content, such as display: inline.

Try adding display: block; to card-header or double check that no other styles are overriding it being display: block.

.card-header {
   display: block;
}

Upvotes: 2

Related Questions