CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
nCardot
nCardot

Reputation: 6587

Background color not filling sides of row/column

I added some rows and columns to a section on a page and there is now a blank strip where the background color isn't filled in. I have all the rows on the page inside a div with class container-fluid. I tried setting padding on the sides of the affected section (with class about) to 0, there is no margin applied on the side (which would prevent it from being filled with color), and I tried width: 100%--the white space is still there. Any ideas as to what the problem is?

Full code: CodePen (note: remove color from body in CSS to see the blank space in CodePen)

HTML of affected section:

        <section class="about" id="about">
          <div class="row">
            <div class="col">
              <h2>About</h2>
            </div>
          <div class="row">
            <div class="col-md-5">
              <img src="img/circle-portrait-small.png" class="portrait">
            </div>
            <div class="col-md-7">
              <p>..(Removed)..</p>
            </div>
          </div>
        </section>

CSS for the section:

.about {
  background-color: WhiteSmoke;
}

.about {
  padding: 3em 0;
}

.about p {
  text-align: left;
}

.about .row {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

Upvotes: 1

Views: 2085

Answers (2)

mahan
mahan

Reputation: 14935

It is because the grid you have built is not aligned with bootstrap's gird layout conventions. You should put the rows directly in the container-fluid. 

<div class="container-fluid">
  <section class="row" id="hero">
    <div class="col"></div>
  </section>
  <section class="row" id="about">
    <div class="col"></div>
  </section>
  <section class="row" id="portfolio">
    <div class="col"></div>
  </section>
  <section class="row" id="contact">
    <div class="col"></div>
  </section>
</div>

container-fluid, by default, has 15px padding left and right. 

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

row, by default, has -15px margin left and right. 

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

If you put all rows directly inside the container-fluid, you won't have that issue.

Check your code-pen. I have fixed the issue.

You do not need to use this. 

.about .row {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

Upvotes: 3

Pixelomo
Pixelomo

Reputation: 6737

Bootstrap's .container-fluid styling is adding padding to this section.

You can override it like this:

body .container-fluid {
    padding-right: 0;
    padding-left: 0;
}

A simpler solution which doesn't mess with the container-fluid style is to just add the same background color to your body that you added on each section so the gap isn't visible:

html body{ background-color: #f5f5f5; }

Here's an updated version of your pen

https://codepen.io/suth_a/pen/NzNvdM

Upvotes: 2

Related Questions