0

I made a page with Bootstrap 4 and there's a white space on the right. I have everything except the nav bar in a div with class col. I didn't put the rows and cols inside a container div because Bootstrap documentation suggests going without it for an edge-to-edge design. (I tried putting them inside a container-fluid div and the gap was still there).

Since col adds 15px on the right and left, I also tried the following, and it didn't remove the gap:

.col {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

CodePen

nCardot
  • 5,992
  • 6
  • 47
  • 83
  • What to do in cases like this is to remove stuff from the page until the problem goes away. Then the last thing you removed was causing the issue. If that still doesn't help in finding a solution, then you can post a [mcve] here. – Mr Lister Apr 21 '18 at 06:39
  • The Bootstrap (both v3 and v4) `.row` has negative margins. Use `container-fluid` to counteract the padding. – Carol Skelly Apr 21 '18 at 08:20
  • As I mentioned in the question @ZimSystem, I tried putting the col divs inside a container-fluid div and the gap was still there. Fixed now but your response and action of marking my question as a duplicate doesn't seem warranted. – nCardot Apr 29 '18 at 06:50
  • Please post the code that reproduces the issue in the question instead of an external link that may changed. If you read the duplicate and [the documentation](http://getbootstrap.com/docs/4.1/layout/grid/#how-it-works) you'll see that the cols would't go inside a container-fluid, the `row` would. This is also done in the accepted answer. – Carol Skelly Apr 29 '18 at 11:49
  • Point taken. In the future I will add all the code inside the question in addition to a CodePen link. I should have been more specific, saying my cols were inside rows, but didn't bother mentioning it then because it was evident from my CodePen. – nCardot Apr 29 '18 at 19:28

3 Answers3

1

try this

.col{
  padding: 0 !important;
}

.row{
  margin-left: 0;
  margin-right: 0;
}

this is why I hate using bootstrap, since you have to use !important to override bootstrap default style. it even worse using themes based on bootstrap, since its already using !important to override bootstrap style, and you want to override it again

am05mhz
  • 2,727
  • 2
  • 23
  • 37
1

There is no need to overwrite bootstrap classes. Use the inbuilt utilities class to overwrite if you have to. Since hero image has to be edge-to-edge you can use p-0 to remove the padding. In footer also you are missing the row-col structure. and wrap your content inside container-fluid as shown in example below.

Try this

Check Demo HERE

HTML

<nav class="navbar navbar-expand-md bg-dark sticky-top navbar-dark">

      <!-- Navbar Content -->
  </div>

</nav>
<div class="container-fluid">
  <div class="row">
    <div class="col p-0">
      <div class="hero-image">
        <div class="hero-text text-white">
          <h1>NC</h1>
          <h5>Web developer</h5>
          <form action="mailto:email@gmail.com" method="post" enctype="text/plain">
            <button class="btn btn-dark btn-top btn-contact">Contact Me</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <section id="about">
    <div class="row about">
      <div class="col">
        <h2>About</h2>

        <!-- Content -->

      </div>
    </div>
  </section>

  <section id="portfolio">
    <div class="row portfolio">

      <div class="col-sm-12">
        <h2>Portfolio</h2>
      </div>
      <!-- Content -->

    </div>
    <!-- End of row div -->
  </section>

  <section id="contact">
    <div class="row contact">
      <div class="col center-block">
        <h2>Contact</h2>
        <p>Have a question or want to work together?</p>

        <!-- Content -->

      </div>
    </div>
  </section>

  <div class="footer bg-dark row">
    <div class="col">

     <!-- Content -->

    </div>
  </div>
</div>
nCardot
  • 5,992
  • 6
  • 47
  • 83
Jyoti Pathania
  • 4,944
  • 1
  • 17
  • 29
0

All you need to do is wrap all row in container-fluid like this

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="hero-image">

      </div>
    </div>
  </div>
</div>

<section id="about">
    <div class="container-fluid">
       <div class="row about">
          <div class="col">

          </div>
       </div>
     </div>
</section>

same you will have to do in portfolio and contact

Zuber
  • 3,393
  • 1
  • 19
  • 34
  • if you get the correct answer, please accept or upvote the answer – Zuber Apr 21 '18 at 09:07
  • if this or any answer has solved your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. – Zuber Apr 21 '18 at 09:13
  • This solved part, but not all, of the problem. I also needed to remove padding from the hero image col. – nCardot Apr 22 '18 at 01:24