CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
user8121434
user8121434

Reputation: 21

Removing padding on columns makes horizontal scrollbar

I wanted to remove the padding from the bootstrap grid column classes.

So I did

.col-x {
    padding: 0;
}

But this is kind of breaking the whole layout because a horizontal scrollbar appears.

I've created a pen for this so you can see it.

What is causing the horizontal scrollbar and how to fix it?

Upvotes: 1

Views: 2101

Answers (2)

Michael Coker
Michael Coker

Reputation: 53709

You have .row elements nested in your columns. .row has a negative margin and always needs to be wrapped in a .container, which has padding that the negative margin offsets. The padding on your columns were doing that. I would just wrap all of your rows in .container-fluid

Rows are placed within a fixed or full-width Container (.container or .container-fluid, respectively) for proper alignment.

/* removing padding on columns makes horizontal scrollbar */
.column {
    padding: 0;
}


.column {
    min-height: 100vh;
    border-right: 1px solid #ccc;
}
.column-header {
    border-bottom: 1px solid #ddd;
}
.column.sidebar {
    position: fixed;
    top: 0; left: 0;
    border-right: 1px solid #ccc;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">

    <div class="col-2 column sidebar">
      fixed side
    </div>

    <div class="col-6 offset-2 column content">
      <div class="column-header mb-5">
        <div class="container-fluid">
          <div class="row">
            <div class="col-8 pt-4 pb-4 pl-5 pr-5">
              Title
            </div>
            <div class="col-4 pt-4 pb-4 pl-5 pr-5 text-right">
              Right
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-4 column content">
      <div class="column-header mb-5">
        <div class="container-fluid">
          <div class="row">
            <div class="col-8 pt-4 pb-4 pl-5 pr-5">
              Title
            </div>
            <div class="col-4 pt-4 pb-4 pl-5 pr-5 text-right">
              Right
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Upvotes: 0

WizardCoder
WizardCoder

Reputation: 3461

The .row has minus margins on them. Also the .content-fluid has padding applied to them. So you just need to add this to your CSS:

.row {
  margin:0;
}
.container-fluid {
  padding:0;
}

Upvotes: 3

Related Questions