0

I need do 5 columns in row grid bootstrap 4. How I can do it?

Now I do:

   <div class="row">
       <div class="col col1"></div>
       <div class="col col2"></div>
       <div class="col col3"></div>
       <div class="col col4"></div>
       <div class="col col5"></div>
   </div>

And when I resize document, my blocks is not go to bottom. Why? How I can do it?

Mafys Grif
  • 557
  • 3
  • 13
  • 30

4 Answers4

1

Keep in mind that when you use the col class without any number or breakpoint, you are just telling the element to be a column and to use all the space available in the row; so if you put multiple col classes the space is distributed equally for all of them, because of this the row doesn't wrap the elments, when you rezise the screen, the row just adjusts to it as well as the elements inside.

In order for the elements to wrap you have to be specific on the size of each column, so when that size does not fit in the row; then it will wrap into a new row, that what the col-*-* classes do.

You should read how the grid system for bootstrap works here: https://getbootstrap.com/docs/4.3/layout/grid/

.col {
  border: 1px solid black;
  min-height: 50px;
}

.col-6 {
  border: 1px solid black;
  min-height: 50px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col col1"></div>
  <div class="col col2"></div>
  <div class="col col3"></div>
  <div class="col col4"></div>
  <div class="col col5"></div>
</div>

<div class="row">
  <div class="col-6 col-md-2 col1"></div>
  <div class="col-6 col-md-2 col2"></div>
  <div class="col-6 col-md-2 col3"></div>
  <div class="col-6 col-md-2 col4"></div>
  <div class="col-6 col-md-2 col5"></div>
</div>
IvanS95
  • 5,364
  • 4
  • 24
  • 62
  • See please this page: https://stackoverflow.com/tags?page=2&tab=popular I need grid how on this page with tags – Mafys Grif Apr 16 '19 at 19:07
  • @Mafys the Bootstrap docs have all the information available to replicate that layout, read them... in my answer I'm explaining to you that if you want columns to resize and wrap based on the screen width you have to use breakpoint classes like col-sm-4, or even col-auto – IvanS95 Apr 16 '19 at 19:10
  • with `col-auto col-md-2 col1` I don't get 100% with of layout. I have a space on the right. – Mafys Grif Apr 16 '19 at 19:13
  • @MafysGrif Why would you use it like that? I think it is not clear what you are asking, your original question was about a 5-column row not wrapping, that's what most people are answering.... If you haven't read how Bootstrap works is hard to help you; I explained how the rows and columns work and provided a link for further documentation; either try reading them first, since what you need is explained there or reword your question... Still, if you are doing something like SO's tags page, that's divided in 4 columns, not 5 – IvanS95 Apr 16 '19 at 20:10
  • @MafysGrif also keep in mind, StackOverflow's page uses CSS Grid, not Bootstrap, which itself is made on Flexbox – IvanS95 Apr 16 '19 at 20:13
0

After having a look at the BS4 docs about the grid system, you must make sure that you have the container, row, and then col-sm|col-md|.... For example:

<div class="container">
   <div class="row">
       <div class="col-sm col1"></div>
       <div class="col-sm col2"></div>
       <div class="col-sm col3"></div>
       <div class="col-sm col4"></div>
       <div class="col-sm col5"></div>
   </div>
</div>

"sm", "md", "lg", and so on refer to at what screen size do the columns wrap into rows. i.e. "xs" is typically a mobile screen.

samhuk
  • 109
  • 1
  • 8
  • 1
    `col` is a valid class though, it adjust to the available space on the row – IvanS95 Apr 16 '19 at 18:57
  • Nope. See please on resize this page: https://stackoverflow.com/tags?page=2&tab=popular When resize elements go on bottom with 1. – Mafys Grif Apr 16 '19 at 19:04
  • 1
    @MafysGrif Is that SO page relavent, since I'm not sure that SO uses BS, or at least on that page... @IvanS95 It may be, however my answer also addresses another point, that is the use of `container` (the asker may already be doing this but it is the only other possible problem, if one does not consider obscure problem routes such as spurious CSS class conflicts/override and so on. – samhuk Apr 16 '19 at 19:29
  • @samhuk I just mentioned the `col` class since you changed them to `col-sm`, just wanted to keep it clear that just `col` is also a valid class – IvanS95 Apr 16 '19 at 20:11
0

Try specify the sizes (12 max).

<div class="container">
    <div class="row">
           <div class="col col-1"></div>
           <div class="col col-2"></div>
           <div class="col col-3"></div>
           <div class="col col-4"></div>
           <div class="col col-2"></div>
    </div>
</div>

https://getbootstrap.com/docs/4.3/layout/grid/

HitaloEmanoel
  • 54
  • 2
0

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row justify-content-center">
           <div class="col-md col-sm-12">col-1</div>
           <div class="col-md col-sm-12">col-2</div>
           <div class="col-md col-sm-12">col-3</div>
           <div class="col-md col-sm-12">col-4</div>
           <div class="col-md col-sm-12">col-5</div>
    </div>
</div>

Here I'm using bootstrap 4. The columns will resize when "screen < 768px" to take full width (col-sm-12).

disgra
  • 683
  • 3
  • 6
  • 18