trouble using react-bootstrap for grid layout

Question

First off, my FE skills are pretty basic so sorry upfront if this a silly question...

I'm trying to create a basic blog page and I'm having trouble with the layout of the content div and the post links div. I want them to be kinda float side by side so that they have a margin from each other, the sides and the header/footer.

I'm using react-bootstrap for that and it sort of works but what I can't figure out why the content div has no margin from the top and the sidebar div does..

here is my site: https://tal-joffe.github.io/blog (ignore the ugly colors and fonts I just started :) )

this is the component that contains both divs:

const PostsTab = () => (
    <div className="post-tab">
        <Grid>
            <Row>
                <Col md={8}>
                    <ContentContainer/>
                </Col>
                <Col md={4}>
                    <VisiblePostsList/>
                </Col>
            </Row>
        </Grid>
    </div>
)

And this is the css I have for the inner components on the containers and the body:

.side-bar {
  background-color: gray;
  min-height: 800px;
}
.post-content{
  background-color: #efefef;
  min-height: 800px;
}

body {
  font-family: sans-serif;
  background-color: aquamarine;
  overflow: auto;
}

There is no other global css code and I don't use any inline styles in the javascript code.

What am I missing?

@Andrew I just think it looks better. regardless I'm trying to improve my frontend capabilities and wanted to understand why would the 2 divs act differently — Tal Joffe
– Tal Joffe, Commented Jul 17, 2017 at 10:36

aaronb · Accepted Answer · 2017-07-16 16:27:57Z

2

There's no margin on either column. Browsers give HTML heading tags margins. In your case, the sidebar's h2 tag is the reason the sidebar looks like it has a margin on the top. Try styling the h2 with margin-top: 0;

You should add a margin-top style to .row or .container. Hope this helps!

answered Jul 16, 2017 at 16:27

aaronb

1624 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tal Joffe Over a year ago

thanks that was exactly the issue. I didn't know tags inside the div could have an impact...

Collectives™ on Stack Overflow

trouble using react-bootstrap for grid layout

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related