CODEWITHSUNDEEP
reactjstwitter-bootstrap
Jonathan Small
Jonathan Small

Reputation: 1079

ReactJS container does not take up entire line

I have a reactJS application where I display a heading at the top of the view and then some text under the heading. I am using this code to generate the view:

render() {
    return (
    <div>   
    <div className="container">
        <div className="enrollment_heading_background">
            <div className="row">
                <div className="col-12 text-center">
                    <label>Online Enrollment</label>
                </div>
            </div>
        </div>
    </div>
    <div className="container">
        <div className="enrollment_background">
            <div className="row">
                <div className="col-12 text-center text_15">
                    <label>Participant Agreement for OnLine Enrollment</label>
                </div>
            </div>
         </div>
    </div>
    </div>
    )
}

And I have the following in my style sheet:

.enrollment_heading_background {
   background-color: #b3ccff;
   padding-top: 5px;
   padding-left: 0px;
   padding-right: 0px;
 }
.enrollment_background {    
   background-color: #ffe6b3;
   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: 5px;
   padding-right: 5px;
}

This is what is showing in the view:

enter image description here

If you notice, there is whitespace on the left and on the right. I have been unsuccessful in getting the blue background of the heading to occupy the entire view and I have been unsuccessful in getting the beige background to occupy the entire view.

Any suggestions would be greatly appreciated.

Upvotes: 0

Views: 29

Answers (1)

brooksrelyt
brooksrelyt

Reputation: 4033

Try:

<div className="enrollment_heading_background">
    <div className="container">
        <div className="row">
            <div className="col-12 text-center">
                <label>Online Enrollment</label>
            </div>
        </div>
    </div>
</div>

<div className="enrollment_background">
    <div className="container">
        <div className="row">
            <div className="col-12 text-center text_15">
                <label>Participant Agreement for OnLine Enrollment</label>
            </div>
        </div>
    </div>
</div>

The padding from your container is causing the white space. You can still keep the container padding but bring the background divs out so they wrap both containers and keep their 100% width.

Upvotes: 1

Related Questions