CODEWITHSUNDEEP
plotly-dashplotly-python
Manny
Manny

Reputation: 63

How to align the card image to centre in Plotly Dash Bootstrap Component?

Is there a way to align the dbc.card image to center in Plotly Dash Bootstrap? I have gone through the documentation and I could find only "Top" and "Bottom". Thanks. Below is the code snippet:

import dash_bootstrap_components as dbc
import dash_html_components as HTML
card = dbc.Card(
[
    dbc.CardImg(src="/static/images/placeholder286x180.png", top=True),
    dbc.CardBody(
        [
            html.H4("Card title", className="card-title"),
            html.P(
                "Some quick example text to build on the card title and "
                "make up the bulk of the card's content.",
                className="card-text",
            ),
            dbc.Button("Go somewhere", color="primary"),
        ]
    ),
],
style={"width": "18rem"},)

Upvotes: 0

Views: 5275

Answers (1)

Chowder
Chowder

Reputation: 126

Needed to solve the same question, this is what I found using Bootstrap cheatsheet:

dbc.CardImg(src="/static/images/placeholder286x180.png", className = 'align-self-center')

I'm new to this so it might not be the most correct, but it worked for me.

Upvotes: 2

Related Questions