# Bootstrap components for plotting graphs side by side

**URL:** <https://community.plotly.com/t/bootstrap-components-for-plotting-graphs-side-by-side/26252>\
**Category:** Dash Python\
**Created:** [July 23, 2019, 10:03am UTC](https://community.plotly.com/t/bootstrap-components-for-plotting-graphs-side-by-side/26252 "2019-07-23T10:03:47Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sangsang](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@sangsang](https://community.plotly.com/u/sangsang)\
**Post date:** [July 23, 2019, 10:03am UTC](https://community.plotly.com/t/bootstrap-components-for-plotting-graphs-side-by-side/26252/1 "2019-07-23T10:03:47Z")

</div>

I tried using the bootstrap components to plot 2 graphs such a way that each plot occupies 6 columns. but, the outcome is different. Help would be much appreciated.One graph is a subplot of 4 plots and another one is single plot. They are overlapping each other.

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [July 23, 2019, 12:58pm UTC](https://community.plotly.com/t/bootstrap-components-for-plotting-graphs-side-by-side/26252/2 "2019-07-23T12:58:56Z")

</div>

Hey @sangsang, could you share some example code that reproduces the issue?

---

<div class="post-metadata">

**Author:** ![sangsang](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@sangsang](https://community.plotly.com/u/sangsang)\
**Post date:** [July 23, 2019, 4:28pm UTC](https://community.plotly.com/t/bootstrap-components-for-plotting-graphs-side-by-side/26252/3 "2019-07-23T16:28:35Z")

</div>

hereby , sharing the portion of the code:  
external\_stylesheets = [‘[https://codepen.io/chriddyp/pen/bWLwgP.css](https://codepen.io/chriddyp/pen/bWLwgP.css)’]

```
app = dash.Dash( __name__ , external_stylesheets=external_stylesheets)
app.layout=html.Div(children=
                            [
                                dbc.Row(html.Div(
                                                [
                                                 dbc.Col(html.Div(
                                                                    [
                                                                    dcc.Graph(
                                                                                figure=plotly_fig)
                                                                    ]),width={'size':6,'order':1}
                                                        ),
                                                 
                                                 dbc.Col(html.Div(
                                                                [
                                                                dcc.Graph(
                                                                            figure=pfig
                                                                         )
                                                                ]
                                                                ),width={'size':6,'order':2}
                                                        )
                                                ]
                                                )
                                        ) 
                            ]
                    )   

```

The graph components contain the matplotlib plots which were converted to plotly objects.