# Struggeling with component alignment

**URL:** <https://community.plotly.com/t/struggeling-with-component-alignment/80990>\
**Category:** Dash Python\
**Created:** [December 17, 2023, 8:04pm UTC](https://community.plotly.com/t/struggeling-with-component-alignment/80990 "2023-12-17T20:04:38Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mvnchi](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@mvnchi](https://community.plotly.com/u/mvnchi)\
**Post date:** [December 17, 2023, 8:04pm UTC](https://community.plotly.com/t/struggeling-with-component-alignment/80990/1 "2023-12-17T20:04:38Z")

</div>

Hello guys,

i keep running into problems with propper alignment of components in Dash.

 ![2023-12-17 20_52_38-Window](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/1/c/1cecfb0c83d4daaba17fb41080bda626c0d8f622.jpeg)

As you can see in the image above i have a row of two dbc.Col which aren’t aligned vertically but also have a gap inbetween.

The code snippet is the following:

```auto
html.Div(
        [dbc.Row([
            dbc.Col([dcc.Markdown("Recent News"),grid],style={'margin-top':10}),
            dbc.Col(
                dcc.Graph(config={
                    "displaylogo": False,
                    'modeBarButtonsToRemove': ['pan2d','lasso2d','toImage']},
                    figure = fig),
                    style={'margin-top':10}),])   
        ],
    ),

```

I tried adding margin-top to align them vertically which doesn’t work. For the gap inbetween both components i tried “no\_gutters” which doesn’t seem to work anymore aswell as className=“g-0”. Are there any other options to achieve the wanted alignment?

---

<div class="post-metadata">

**Author:** ![mvnchi](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@mvnchi](https://community.plotly.com/u/mvnchi)\
**Post date:** [December 17, 2023, 10:58pm UTC](https://community.plotly.com/t/struggeling-with-component-alignment/80990/2 "2023-12-17T22:58:34Z")

</div>

Was able to solve it myself by using Bootstrap Cards and setting the margin for each card individually. I guess Bootstrap Cards are the way to go if you want a properly aligned dashbord.

```auto
html.Div(
        [dbc.Card(
            dbc.CardBody([
                dbc.Row([
                    dbc.Col([dcc.Markdown("Recent News"),grid],style={'margin-top':10,'margin-right': -100},width=6),
                    dbc.Col(
                        dcc.Graph(config={
                            "displaylogo": False,
                            'modeBarButtonsToRemove': ['pan2d','lasso2d','toImage']},
                            figure = fig),
                            style={'margin-top':10,'margin-left': -100},width=6),], align='center')]),className="border-0 bg-transparent mx-0 px-0")   
        ],
    ),

```