CODEWITHSUNDEEP
javascripthtmlcss
patrickhuang94
patrickhuang94

Reputation: 2115

div doesn't expand all the way horizontally

Why is there white space to the left and right of my div?

enter image description here

render() {
    return (
        <div className="container intro-body">
            <div className="row">
                <h2 className="intro-name center-block">TEXT</h2>
            </div>
        </div>
    )
}

And in my css:

.intro-body {
    height: 500px;
    background-color: #3BC5C3;
}

I've tried to set body to margin: 0 and padding: 0, thinking it had to do with Bootstrap's default values, but it didn't work. I also don't have a container so why does it still have padding?

Upvotes: 4

Views: 286

Answers (1)

gavgrif
gavgrif

Reputation: 15509

The issue is the "container" class - Bootstrap also applies a styling of this - use "container-fluid" to get the full width.

render() {
    return (
        <div className="container-fluid intro-body">
            <div className="row ">
                <h2 className="intro-name center-block">TEXT</h2>
            </div>
        </div>
    )
}

Upvotes: 6

Related Questions