My Bootstrap row is extending beyond the page width when I resize it?

Question

My Bootstrap row is extending beyond the page width when I resize it?

2.2k Views Asked by Tjm92 At 11 April 2025 at 13:15

I'm very new to Bootstrap and have been working through some tutorials. I'm currently trying to rebuild Google's homepage and have run into some difficulty with the responsiveness of the grid system.

I've created a very basic layout of the top bar on Google's homepage and it more or less looks fine as it is fullscreen; however, when I resize the window, the text on the right hand side spills over the width of the window.

    <body>
      <div class="container-fluid" id="topbar">
        <div class="row">
          <div class="col-1 justify-content-start aboutlink">
            About
          </div>
          <div class="col-1 justify-content-start">
            Store
          </div>
          <div class="col-8">
          </div>
          <div class="col-1 justify-content-end gmaillink">
            Gmail
          </div>
          <div class="col-1 justify-content-end">
            Images
          </div>
        </div>
      </div>

Here's an image of the issue:

The classes "aboutlink" and "gmaillink" are simply aligning the text to the right and the topbar id has a 15px margin and sets the font size.

I've had a read through the responsive breakpoints and grid system documentation, but can't seem to fix this issue. Would be grateful if anyone could share some advice?

Thank you.

Original Q&A

There are 1 best solutions below

**FluffyKitten** · Accepted Answer

What is going wrong?

If we add a border to the columns and allow the word to wrap if it doesn't fit, we can see better what is happening.

Take a look at this example, and you will see that on smaller screens the words are not fitting into the col-1 divs, and because words don't wrap by default it is causing the col to grow bigger than it should be to accommodate the size of the text:

.col-1 {
  overflow-wrap: break-word; border: 1px solid lightgray;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
  <div class="row">
    <div class="col-1 aboutlink">
      About
    </div>
    <div class="col-1">
      Store
    </div>
    <div class="col-8">
    </div>
    <div class="col-1 gmaillink">
      Gmail
    </div>
    <div class="col-1">
      Images
    </div>
  </div>
</div>

1. Breakpoints and padding classes

Bootstrap's grid classes to allow you to set the breakpoints for the cols. So for example these classes mean: give the column 6/12 of the space on screens up to the md breakpoint (768px), and 8/12 of the space from 768px and up:

<div class="col-6 col-md-8">

Bootstrap also has spacing classes that can be used to change the padding of the columns. The px-* classes set the padding for the left and right padding. The default is px-3, so we can use px-1 to make the padding smaller and so the same size columns can fit in more content.

Example using col-sm-* and px-*:

.row div {border:1px solid lightgray;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
  <div class="row">
    <div class="col-2 col-sm-1 aboutlink px-1">
      About
    </div>
    <div class="col-2 col-sm-1 px-1">
      Store
    </div>
    <div class="col-4 col-sm-8">
    </div>
    <div class="col-2 col-sm-1 gmaillink px-1">
      Gmail
    </div>
    <div class="col-2 col-sm-1 px-1">
      Images
    </div>
  </div>
</div>

2. Bootstrap Auto classes

A better option in this case (as you don't need a defined structure) might be to use the col-auto Bootstrap classes that will use only the space needed to fit the content - this can overcome the problem of having to set the cols to a specific proportion of the width, such as 1/12 or 2/12.

In the example below, we set the width of the first 2 and last 2 columns to col-auto so they will resize to fit the text inside them, and then give the middle column the col class to take the rest of the available space:

.col-auto{ border:1px solid lightgray;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
  <div class="row">
    <div class="col-auto aboutlink px-1">
      Abouttttt
    </div>
    <div class="col-auto px-1">
      Store
    </div>
    <div class="col">
    </div>
    <div class="col-auto gmaillink px-1">
      Gmail
    </div>
    <div class="col-auto px-1">
      Images
    </div>
  </div>
</div>

FYI: the justify-content-* classes are for flexbox layouts & don't work with the grid classes, so I have removed them from the examples.

My Bootstrap row is extending beyond the page width when I resize it?

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in BOOTSTRAP-4

Related Questions in BOOTSTRAP-GRID

Trending Questions

Popular # Hahtags

Popular Questions