CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Dylan
Dylan

Reputation: 333

Bootstrap columns cause horizontal scrollbar

At the "My Work" section of this website: Website

something is causing it to be too wide.

When you hover over a project (or trigger the :hover state on the <div class="projectbox"> and look at the project icons (eye, github and images) the last project's "images" is what causing it I think.

However, I do not know why this is. Should I just remove the padding from these buttons? I feel like that's kind of not what you're supposed to be doing. (If the padding is even what's causing it to happen).

Relevant code:

Relevant code

Upvotes: 11

Views: 18352

Answers (6)

sabil shrestha
sabil shrestha

Reputation: 41

If you do not want to use container because of margin which it creates, then you can use container-fluid.

<div class="container-fluid">
   <div class="row">
      <div class="col-md-12">...</div>
   </div> 
</div>

Upvotes: 3

Spectric
Spectric

Reputation: 32002

Apply m-auto (margin auto) to the row.

Without m-auto auto:

.row {
  overflow-x: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> Without margin auto:
<div class="row">
  <div class="col-md">
    Column 1
  </div>
  <div class="col-md">
    Column 2
  </div>
</div>

With m-auto auto:

.row {
  overflow-x: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> Without margin auto:
<div class="row m-auto">
  <div class="col-md">
    Column 1
  </div>
  <div class="col-md">
    Column 2
  </div>
</div>

Upvotes: -1

Luat Nguyen
Luat Nguyen

Reputation: 11

You can fix this by applying these. It would work

.col-12{
    padding-right: 0!important;
    padding-left: 0!important;
}
.row{
    margin-right: 0px;
    margin-left: 0px; 
}

Upvotes: -1

StanLe3
StanLe3

Reputation: 360

A dirty little trick worked for me. You could add another 12 column grid before .row :

<div class="col-md-12">
    <div class="row">
        <div class="col-md-12">
    </div> 
</div>

Upvotes: 3

WebDevBooster
WebDevBooster

Reputation: 14964

Horizontal scrollbars are usually caused by using the Bootstrap grid incorrectly.

The solution proposed by Ben Goossens is a hack and should be avoided because it makes the use of Bootstrap pointless. Use Bootstrap as intended and you won't need any hacks or custom css gymnastics.

Here's what you need:

1) .container div

2) .row div

3) .col div

That's the "holy trinity" you need in order for the Bootstrap grid to work properly.

Always put all of your normal content into Bootstrap columns (which in turn go into a row, which goes into a container) and you won't have any horizontal scrollbar issues.

The Bootstrap rows are designed to work with columns together. If you leave one of those 2 out, you're gonna run into issues.

Upvotes: 28

Ben Goossens
Ben Goossens

Reputation: 197

change this:

.row {
    margin-right: -15px;
    margin-left: -15px;
}

to:

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

Upvotes: 0

Related Questions