CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4
Retros
Retros

Reputation: 3611

Float right two span elements in Bootstrap

I've been trying to have two span elements, one with Bootstrap 4 class 'close' and the other with class 'badge', floated right. The thing is if I add float-right to the badge, they always end up right next to each other. Or, if I use clear: right, the badge falls to the end of the div.

This needs to be my outline:

enter image description here

Here's the HTML I have so far:

<div class="card">
  <div class="card-header">
    <span class="close">x</span>
    <img src="image.png">
    <h1 class="card-title d-inline">Title</h1>
    <span class="badge badge-default d-inline">Badge</span>
    <h2 class="card-subtitle">Subtitle</h2>
  </div>
</div>

How can I achieve that with Bootstrap 4? Thank you!

Upvotes: 1

Views: 6953

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362270

You can use margin or padding (spacing utils) around the badge..

http://www.codeply.com/go/XEbOw2F29d

<div class="card">
    <div class="card-header">
        <span class="close">x</span>
        <span class="badge badge-default float-right m-2">Badge</span>
        <img src="//placehold.it/40">
        <h1 class="card-title d-inline">Title</h1>
        <h2 class="card-subtitle">Subtitle</h2>
    </div>
</div>

EDIT

If you're looking for something like shown in your image, it's not a simple matter of float-right. You'll need to use the spacing utils to adjust the elements..

<div class="card">
    <div class="card-header pt-0">
        <div class="w-100 text-right close">x</div>
        <img src="//placehold.it/60" class="float-left mt-2 mr-2">
        <span class="badge badge-default float-right mt-2">Badge</span>
        <h1 class="card-title my-0"> Title</h1>
        <h2 class="card-subtitle d-inline-block">Subtitle</h2>
    </div>
</div>

enter image description here

http://www.codeply.com/go/XEbOw2F29d

Upvotes: 1

luismiguelss
luismiguelss

Reputation: 312

Why don't you try creating a new div and putting inside "Close" and "Badge"? Then you only need to float the div to the right. Tell me if it works! 😉

Upvotes: 1

Related Questions