Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Enable Card Body to center align its contents

See original GitHub issue

Issue Description

I have found that in most of our use cases, the contents of a card end up having to utilize text-align center. While this works fine, it ends up with some random css scattered around to do this. 1 option we have to just make a reusable component for centering in a div and pass that to the card body. However, the pattern I have noticed is that cards almost always have their body centered.

My proposal is either Card or Card.Body enable a prop isContentCentered which adds this css.

Issue Type

Enhancement

Expected Behavior

I would like to be able to center a card like this

<Card>
  <Card.Body isContentCentered>
     <MyContent />
  </Card.Body>
</Card>

Current Behavior

Currently, a consumer can pass in their content wrapped in a component that applies centering

Issue Analytics

State:
Created 6 years ago
Comments:8 (5 by maintainers)

Top GitHub Comments

1reaction

dm123455commented, Feb 27, 2018

I agree with Alex, there are lots of PR where people are adding custom css to align text to the center. +1 on doing this. @bjankord @mjhenkes are you fine with it?

0reactions

PaulSolDevcommented, Mar 15, 2018

JIRA created

Top Results From Across the Web

Bootstrap 4 vertical align text won't center on card

I tried "my-auto" on parent, card, and card-body. I tried "d-flex align-items-center h-100" and "justify-content-center". Also tried to play ...

Cards - Bootstrap

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background...

Center card content in Bootstrap 4 on Codeply

Some quick example text to build on the card title and make up the bulk of the card's content. Cras justo odio; Dapibus...

Bootstrap 4 Vertical Center - Medium

One way to vertically center is to use my-auto . This will center the element within it's flexbox container (The Bootstrap 4 .row...

CSS: centering things

CSS has the property 'text-align' for that: ... block is to be formatted as a table cell, because the contents of a table...