Css3 Multi-Column with column-count in Bootstrap

Question

I want to have a layout that work like the css3 multicolumn with column-count: 4 functionality in such that the layout is fluid. My layout is as folowing: for small device:

control1
control2
control3
control4

For bigger device: (look a the order)

control1  control3
control2  control4

Then for extra big screen i could have

control1  control2  control3  control4

This keeps the order of the control so that if i want to use my existing keys (tab index) it works perfectly.

Please look in explorer how this work with css3

JS Fiddle

I do really want to know if this is even possible with bootstrap or any other framework — FasoService
– FasoService, Commented Feb 4, 2015 at 16:59
haztbh, grid does not keep the order of the controls. Think about a win form where user alway fill up form in an order with tab index keys. The order need to be the same vertically , then horizontally after. — FasoService
– FasoService, Commented Feb 4, 2015 at 17:07
That's not an issue with bootstrap that's an issue with the way you have decided to do the order. Bootstrap orders in the logical way. You probably need to rethink that aspect of it. Remember, this as a website, not a win form. If those are strict requirements then you will have to come up with something custom yourself. — haxtbh
– haxtbh, Commented Feb 4, 2015 at 17:26

Mosh Feu · Accepted Answer · 2016-05-30 12:07:47Z

4

You can define all this using the grid system right: Here. defining the screen size: xs: extra-small, sm: small and md: for medium, lg: for large. Right now i just decided to use sm: for small device, lg for extra big screen in your case, nest the columns

<div class="row">
  <div class="col-md-6 col-lg-6 col-sm-12">
    <div class="col-md-12 col-lg-6 col-sm-12">control1</div>
    <div class="col-md-12 col-lg-6 col-sm-12">control2</div>
  </div>
  <div class="col-md-6 col-lg-6 col-sm-12">
    <div class="col-md-12 col-lg-6 col-sm-12">control3</div>
    <div class="col-md-12 col-lg-6 col-sm-12">control4</div>
  </div>
</div>

edited May 30, 2016 at 12:07

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

answered Feb 4, 2015 at 17:09

Coding Enthusiast

3,9331 gold badge31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

FasoService Over a year ago

The problem here is that when control1(field security make that user can not see that field), control3 does not shift to the first column

Coding Enthusiast Over a year ago

oh i see what you mean. Let me work on that for a second. @FasoService

Coding Enthusiast Over a year ago

i think you can achieve that with playing around with classes and Js change the class depending on the settings and I don't quite get what you mean by security settings too thanks@FasoService

FasoService Over a year ago

I meant some uses will not see all controls based on permission. SO let say control2 will not show, for me, for exemple, control3 need take its place

Mosh Feu · Accepted Answer · 2016-05-30 12:08:40Z

Pure css option here I would not recomment to use table tags anymore, you can better manipulate tables with "display: table" and change it for a different view as you desire. tables without table

.container {
  column-width: 280px;
  -webkit-column-count: 4; /* Chrome, Safari, Opera */
  -moz-column-count: 4; /* Firefox */
  column-count: 4;
}
@media (max-width: 800px) {
  .container {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
  }
}
@media (max-width: 500px) {
  .container {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
  }
}

.table {
  display: table;
}

.table-row {
  display: block;
}

.table-cell {
  display: inline;
}

<div class="container">
  <div class="table">
    <div class="table-row">
      <div class="table-cell">Label1</div>
      <div class="table-cell">Editor1</div>
      <div class="table-cell">Description1</div>
    </div>
    <div  class="table-row">
      <div class="table-cell">Label2</div>
      <div class="table-cell">Editor2</div>
      <div class="table-cell">Description2</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Label3</div>
      <div class="table-cell">Editor3</div>
      <div class="table-cell">Description3</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Label4</div>
      <div class="table-cell">Editor4</div>
      <div class="table-cell">Description4</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Label4</div>
      <div class="table-cell">Editor4</div>
      <div class="table-cell">Description4</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Label4</div>
      <div class="table-cell">Editor4</div>
      <div class="table-cell">Description4</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Label4</div>
      <div class="table-cell">Editor4</div>
      <div class="table-cell">Description4</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Label4</div>
      <div class="table-cell">Editor4</div>
      <div class="table-cell">Description4</div>
    </div>
  </div>
</div>

user1787803 · Accepted Answer · 2020-10-14 12:28:18Z

2

For those who have stubbled across this page as I did you may find column-width will work.

<div style="column-width: 250px;">
    <div>Control 1</div>
    <div>Control 2</div>
    <div>Control 3</div>
    <div>Control 4</div>
</div>

edited Oct 14, 2020 at 12:28

answered Sep 24, 2020 at 23:50

user1787803

314 bronze badges

2 Comments

user2845090 Over a year ago

For "Lg (<1000px)" on Chrome 85 the layout with 4 items is the same as "Md (<750px)". With 5 items the layout is 3 columns, first column with 1, 2, second column with 3, 4 and the third column has just 5. I checked this just because the layout you have looks odd ('sorted' across... while the others are all 'sorted' in column)

user1787803 Over a year ago

@user2845090 You are correct. I based this off an example I had and didn't test the code fully. I have updated the answer and this should work for the OP question and hopefully will be a starting point for others. Thanks.

Sam Arul Raj T · Accepted Answer · 2020-12-15 13:51:34Z

0

Grid layout will solve your problem

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr))">
    <div>Control 1</div>
    <div>Control 2</div>
    <div>Control 3</div>
    <div>Control 4</div>
    <div>Control 5</div>
    <div>Control 6</div>
    <div>Control 7</div>
    <div>Control 8</div>
</div>

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))">
    <div>Control 1</div>
    <div>Control 2</div>
    <div>Control 3</div>
    <div>Control 4</div>
    <div>Control 5</div>
    <div>Control 6</div>
    <div>Control 7</div>
    <div>Control 8</div>
</div>

answered Dec 15, 2020 at 13:51

Sam Arul Raj T

1,77017 silver badges23 bronze badges

Collectives™ on Stack Overflow

Css3 Multi-Column with column-count in Bootstrap

4 Answers 4

4 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related