Bootstrap 4: Vertically center badge with utilities only

Question

I'm making a Bootstrap 4 card that in its header needs to have an image, title, subtitle, badge and a close button. And the badge needs to be vertically centered on the right, while the image, title and subtitle need to be vertically centered on the left.

Here's an image, it'll explain things better:

And I can't get either title and subtitle, nor badge vertically centered. I must do this using Bootstrap utilities only, so no additional CSS if possible(or very little if there's no other choice). How can I achieve this?

Here's my code:

 .close { font-size: 20px; text-shadow: none; color: #000; opacity: 1; position: absolute; right: 0; top: 0; } .card-title { font-size: 18px; } .card-subtitle { font-size: 11px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <div class="card"> <button type="button" class="close close-chat mr-1" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <div class="card-header border-0 py-3"> <img src="http://placehold.it/45x45" class="rounded-circle float-left mr-3"> <h4 class="card-title mb-0 d-inline align-middle">Card title</h4> <span class="badge badge-success float-right px-4 py-1 mt-2">Success</span> <h6 class="card-subtitle text-muted">Card subtitle</h6> </div> <div class="card-block"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> 

Answer 1

Use the flexbox utility classes in Bootstrap 4. Here's a good guide to flexbox if you're not familiar.

The added classes in the code below are d-flex justify-content-between align-items-center , but you'll also need a new wrapper around the title and subtitle with its own classes.

 .close { font-size: 20px; text-shadow: none; color: #000; opacity: 1; position: absolute; right: 0; top: 0; } .card-title { font-size: 18px; } .card-subtitle { font-size: 11px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <div class="card"> <button type="button" class="close close-chat mr-1" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <div class="card-header border-0 py-3 d-flex justify-content-between align-items-center"> <img src="http://placehold.it/45x45" class="rounded-circle float-left mr-3"> <div class="mr-auto"> <h4 class="card-title mb-0 d-inline align-middle">Card title</h4> <h6 class="card-subtitle text-muted">Card subtitle</h6> </div> <span class="badge badge-success px-4 py-1 mt-2">Success</span> </div> <div class="card-block"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> 

Answer 2

Use the BS 4 flexbox utils. You can change the card-header to display:flex using the d-flex class then align its' contents accordingly...

http://codeply.com/go/qj2pblwSWB

<div class="card">
    <button type="button" class="close close-chat mr-1" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <div class="card-header bg-info border-0 py-3 d-flex align-items-center">
        <img src="http://placehold.it/45x45" class="rounded-circle align-self-start mr-3">
        <div>
            <h4 class="card-title mb-0">Card title</h4>
            <h6 class="card-subtitle text-muted">Card subtitle</h6>
        </div>
        <span class="badge badge-success ml-auto px-4">Success</span>
    </div>
    <div class="card-block">
        ..
    </div>
</div>

http://codeply.com/go/qj2pblwSWB

Answer 3

Bootstrap 4 leverages flexbox primarily for it's layout/grid utilities. You can use classes such as align-items-* to vertically position elements within a row. In this case align-items-center can be used to center the items.

You'd use .col-*-auto in combination with .col within a .row to have Bootstrap auto size elements.

You technically don't need to use a .card if you don't want to as long as you have control over the class representing this "card" like element. The grid system could give you much more control over the layout of your custom "card" like element.

Here is a link to a plunker demonstrating the functionality using the built in Bootstrap 4 classes.

<!-- This extra .row and .col.col-sm-auto allows card to be auto sized -->
<div class="row">
    <div class="col col-sm-auto">
        <div class="foo">
            <div class="row align-items-center">
                <div class="col col-sm-auto"><img class="rounded-circle" src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50" /></div>
                <div class="col col-sm-auto text-center">
                    <span>TITLE</span>
                    <br>
                    <span>SUBTITLE</span>
                </div>
                <div class="col"></div>
                <div class="col col-sm-auto text-right">
                    <span>BADGE</span>
                </div>
                <div class="col col-sm-auto">
                    <span class="close">X</span>
                </div>
            </div>
        </div>
    </div>
</div>

Hopefully this helps!