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

Question

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.

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.

user_514878 · 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;
}



  
    
      About
    
    
      Store
    
    
    
    
      Gmail
    
    
      Images

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:

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;}



  
    
      About
    
    
      Store
    
    
    
    
      Gmail
    
    
      Images

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;}



  
    
      Abouttttt
    
    
      Store
    
    
    
    
      Gmail
    
    
      Images

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?

1 Answers