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.

    <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.

FluffyKitten · Accepted Answer · 2020-10-08T00:07:56.543

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.

Thank you so much for this extremely detailed response, really appreciate the time you've put into explaining everything for me. It all makes a lot of sense. Didn't think to add a border on to the columns, definitely need to work on understanding how to troubleshoot these issues better - thanks again for helping me on my way! I will stick to the auto classes moving forward where possible. :) — Tjm92, Oct 08 '20 at 00:01
@Tjm92 Glad to help! Choosing the right col class all depends on what you want - a lot of the time the breakpoint classes e.g. `col-4 col-md-3` are ideal, especially if you are trying to create a defined grid structure, like a gallery of images or equal text blocks for example. It will take time to become familiar with all the options and learning which are most suitable in different situations. It can still come down to a bit of trial and error sometimes :) — FluffyKitten, Oct 08 '20 at 00:06
@Tjm92 Also, just to make things more complicated you also have CSS grids and flexbox! They are worth looking at too, they are more flexible than Bootstrap grids but that also means they have more options which can make it a bit more difficult to learn the nuts & bolts of how it works. Maybe sticking with Bootstrap as it is a bit more intuitive to start, and then move on to flexbox when you need a flexible less grid-like layout. — FluffyKitten, Oct 08 '20 at 00:11
Thank you for the additional tips, will definitely be playing around with them over the next few weeks - hopefully it will all start to become second nature soon enough. I did read on a few posts that I should try to stay away from Bootstrap grids and instead spend time learning other web layout models. But I will do as you've said and look into Flexbox as a next step then. Thanks again, very much appreciated!!! — Tjm92, Oct 08 '20 at 00:22
@Tjm92 CSS Grids are probably replacing Bootstrap grids, but IMO Bootstrap grid classes are a bit easier to learn when you're starting off because it is easier to visualise and define... that is just my opinion though :) — FluffyKitten, Oct 08 '20 at 00:25

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

1 Answers1