Aligning row of cards horizontally

Hello there,

i’m trying to align cards side by side horizontally but no matter what they appear vertically instead.

            dbc.Container(dbc.Row([dbc.Col(card),dbc.Col(card2),dbc.Col(card3),dbc.Col(card4)], style={"height": "auto",'width': '250px','margin-top':10,'margin-bottom':10, 'margin-right': 10,'display':'inline-block'})),dbc.Container(dcc.Markdown("Recent News")),dbc.Container(grid),]

As you can see i already tried all kinds of style options but with no sucess. Is there any options that sets the inline-block alignment? Or should i use seperae html.div’s for this. Thanks in advance! And sorry if this is a trivial question but i can’t seem to find an answer for it.

2023-12-07 00_38_40-Dash

I think you just need one of html.Div or dbc.Container and I think you should add width to you each Col to set it horizontal. Something as below might work:

from dash import html, dcc
import pandas as pd
from dash import Dash, Input, Output, State, dcc, html
import dash_bootstrap_components as dbc
import plotly.graph_objects as go

fig = go.Figure()

    mode = "number+delta",
    value = 350,
    delta = {'reference': 400, 'relative': True},
    domain = {'x': [0, 0], 'y': [1, 1]}))

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.LUX])

card1 = dbc.Card(dbc.CardBody([dcc.Graph(figure=fig)]))
card2 = dbc.Card(dbc.CardBody([dcc.Graph(figure=fig)]))
card3 = dbc.Card(dbc.CardBody([dcc.Graph(figure=fig)]))
card4 = dbc.Card(dbc.CardBody([dcc.Graph(figure=fig)]))

app.layout = dbc.Container([
        dbc.Col([card1], width={'size':3}),
        dbc.Col([card2], width={'size':3}),
        dbc.Col([card3], width={'size':3}),
        dbc.Col([card4], width={'size':3})]),
            dcc.Markdown("Recent News"))

if __name__ == "__main__":

1 Like

Thank you! This sort of works.

By the way is there a way to prevent the app from resizing for example if the page is viewed with different resolutions? For example if i inspect in chrome as a mobile device all the cards become clustered together… Is there any fix to this behaviour?

Instead of width you can set it as xs, md, lg. You can refer it here: Layout - dbc docs