How to make equal 5 columns in bootstrap 4?

Question

I have to create 5 columns in a row but sometime it may be less than 5 columns in a row, how can i manage this?

My Code:-

.col {
  border: solid;
  margin: 2px;/* this can be added without breaking the row */
}
.col:before {
content:attr(class);/* show class used */
color:crimson

For example:- Right now How can i manage last two boxes, i want all the boxes should equal like first row boxes width...

Thank You!

user_927172 · Answer

If I'm understanding you correctly, you want all columns to always be the same width as the columns in the first two rows. If that is correct, you could just override the max-width property on Bootstrap's col class.

Something like this (using your unchanged HTML):

.col {
  border: solid;
  margin: 2px;
  /* this can be added without breaking the row */
  max-width: 18% !important;  /* added. note, if you remove the margin above, you could set this to 20% */
}

.col:before {
  content: attr(class);
  /* show class used */
  color: crimson

You may also wish to set a constant width for all columns using the width property. But I may be misunderstanding what you're trying to do.

How to make equal 5 columns in bootstrap 4?

1 Answers