Justify text within dbc card - plotly dash

Question

I can't seem to move the alignment of text within a dbc card. Using below, I want to move 100 in card 2 down. I'm trying everything to move it up or down but nothing seems to work. I have certain card sizes I need to maintain so I'd really like to keep the height of those fixed and just be able to shift the text margin.

I don't necessarily want the text to be exactly ordered. I need to be able to shift up and down.

I'd ideally like to use cards but I'm not against using a separate option.

import dash
from dash import Dash, dcc, html
import dash_bootstrap_components as dbc

external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]

app = dash.Dash(__name__, external_stylesheets = external_stylesheets)

cards = dbc.CardGroup(
    [
        dbc.Card(
            dbc.CardBody(
                [
                    html.H5("Card 1", className="card-title"),
                    html.P(
                        "This card has some text content, which is a little "
                        "bit longer than the second card.",
                        className="card-text",
                    ),
                    html.P(
                        100,
                        className="card-text text-center align-self-bottom",
                    ),
                ]
            )
         ),
        dbc.Card(
            dbc.CardBody(
                [
                    html.H5("Card 2", className="card-title"),
                    html.P(
                        "This card has some text content.",
                        className="card-text",
                    ),
                    html.P(
                        100,
                        style = {"marginBottom": -50, 'paddingBottom':-500},
                        className="card-text text-center align-self-bottom",
                    ),
                ]
            )
        ),
        dbc.Card(
            dbc.CardBody(
                [
                    html.H5("Card 3", className="card-title"),
                    html.P(
                        "This card has some text content, which is longer "
                        "than both of the other two cards, in order to "
                        "demonstrate the equal height property of cards in a "
                        "card group.",
                        className="card-text",
                    ),
                    html.P(
                        100,
                        className="card-text text-center align-self-bottom",
                    ),
                ]
            )
        ),
    ]
)

app.layout = dbc.Container([
    
dbc.Row(
    [
        dbc.Col(cards),
    ]
)

    ])

if __name__ == '__main__':
       app.run_server(debug=True, port = 8050)

Answer 1

The simplest would be to keep this content outside the card body, ie. as a child of dbc.Card() that comes after dbc.CardBody() :

cards = dbc.CardGroup([
    dbc.Card([
        dbc.CardBody([
            html.H5("Card 1", className="card-title"),
            html.P(
                "This card has some text content, which is a little "
                "bit longer than the second card.",
                className="card-text",
            )
        ]),
        html.P(
            100,
            className="card-text text-center",
        )
    ]),
    dbc.Card([
        dbc.CardBody([
            html.H5("Card 2", className="card-title"),
            html.P(
                "This card has some text content.",
                className="card-text",
            )
        ]),
        html.P(
            100,
            className="card-text text-center",
        )
    ]),
    dbc.Card([
        dbc.CardBody([
            html.H5("Card 3", className="card-title"),
            html.P(
                "This card has some text content, which is longer "
                "than both of the other two cards, in order to "
                "demonstrate the equal height property of cards in a "
                "card group.",
                className="card-text",
            )
        ]),
        html.P(
            100,
            className="card-text text-center",
        )
    ])
])

---

[Edit]

I'd ideally align 100 up in all three cards so it it's centered horizontally AND aligned half way between the text above and the border below.

In this case, you can add the class card-body to each paragraph so that they are stretched the same way as the dbc.CardBody component above them (ie. the two bodies receive the same amount of space to fit the card height), and then adjust by adding some styles :

        html.P(
            100,
            className="card-text text-center card-body",
            style={
                'paddingTop': '0',
                'position': 'relative',  # <- if needed set this and
                'top': '-2px'            # <- adjust here
            }
        )