CODEWITHSUNDEEP
cssreactjsreact-bootstrap
Tal Joffe
Tal Joffe

Reputation: 5828

trouble using react-bootstrap for grid layout

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?

Upvotes: 0

Views: 979

Answers (1)

aaronb
aaronb

Reputation: 162

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!

Upvotes: 2

Related Questions