Bootstrap 4 - Grid - last column is taking full width

Question

I have a basic Bootstrap 4 grid like this one:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
   <div class="col">
    some content
   </div>
   <div class="col">
    some content
   </div>
   <div class="col">
    some content
   </div>
   <div class="col">
    some content
   </div>
   <div class="col">
    some content
   </div>
   <div class="col">
    some content
   </div>
   <div class="col">
    some content
   </div>
  </div>
 </div>

Columns are correctly stretching and filling out the row width, but on some viewports last column is sent to next row (since it doesn't fit) and somehow stretching too much (and taking full width of row).

How can I prevent this from happening?

score 0 · Answer 1 · answered Nov 12 '18 at 19:31

Use flex-nowrap on the row...

<div class="container">
    <div class="row flex-nowrap">
        <div class="col">
            some content
        </div>
        <div class="col">
            some content
        </div>
        <div class="col">
            some content
        </div>
        <div class="col">
            some content
        </div>
        <div class="col">
            some content
        </div>
        <div class="col">
            some content
        </div>
        <div class="col">
            some content
        </div>
    </div>
</div>

https://www.codeply.com/go/w8H4wPL8Vj

Thank you, solved my problem, but now those columns doesn't have the same size and don't wrap at all. I want those columns to wrap, but don't want them to fill the full viewport size in case there is only one or two divs on next row. — Jelean Thomas, Nov 13 '18 at 19:53

score -1 · Answer 2 · answered Nov 12 '18 at 19:19

-1

Columns inside a row can be styled using bootstrap class col-xs-* so that all your columns fit into the same row instead of going to the next row.

For example,

<div class="container">
  <div class="row">
     <div class="col-xs-4">
     </div>
     <div class="col-xs-4">
     </div>
     <div class="col-xs-4">
     </div>
  </div>
</div>

answered Nov 12 '18 at 19:19

Prasanth Kalli

1
2

Thanks, but that's not what I am looking for. I know how that works, but I want those columns to fit automatically (which class .col is doing via flexbox). Just don't want the last one to fill the width completely. – Jelean Thomas Nov 12 '18 at 19:22

score -1 · Answer 3 · answered Nov 12 '18 at 19:26

You can use the bootstrap breakpoints in col by add extra few classes such as: col-lg-x where x is a given number in the 12 grid system provided by bootstrap, for example you want all seven column to be on one row on large screens, and it should breakdown to two on each row on mobile screen, you simply add a class col-xs-x where x is a given number from 1 to 12, by giving it col-xs-6 col-md-3 col-lg-1 where xs represents small and extra small devices, md represents medium devices and lg represents large screen devices.

You're simply translating that on xs devices it should be two on a row and on md devices it should be four on a row and lg devices should be that seven column on a row.

Link to understand more http://getbootstrap.com/docs/4.1/layout/grid/

I know about the grid. I think you didn't get the question. I don't want to use specific number of columns, want them to be automatically sized, but just to stay the same size as others even if they can take more space of viewport. — Jelean Thomas, Nov 13 '18 at 19:56

Bootstrap 4 - Grid - last column is taking full width

3 Answers3