2

I have more than 12 columns in the row which makes the columns stack vertically, but the top ones have different size compared to bottom ones.

<div class="container-fluid">
  <div class="row">
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
  </div>
</div>

I am trying to have responsive (allow grow) columns but all columns should carry same width.

enter image description here

enter image description here enter image description here

Improve this question
4
  • Have you tried col-md-4? Commented May 7, 2019 at 14:07
  • 1
    add an empty one at the end that is invisible Commented May 7, 2019 at 14:07
  • @TemaniAfif Please don't advice ugly fixes :) Commented May 7, 2019 at 14:15
  • 1
    @Wimanicesir it's not an ugly, it's a working fix (simplified example: jsfiddle.net/0cpztxna/1) Commented May 7, 2019 at 14:21

2 Answers 2

Reset to default
6

You can try insert a col-md-4 with no content or insert only 2 col-md-4 on a row, See if this help you. Look at full screen. (Modified the answer with the help of the comments)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      1
    </div>
    <div class="col-md-4">
      2
    </div>
    <div class="col-md-4">
      3
    </div>
  </div>  
  <div class="row">
    <div class="col-md-4">
      1
    </div>
    <div class="col-md-4">
     2
    </div>
     <div class="col-md-4" id="last-column">
    </div>
  </div>
</div>

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

5 Comments

what is md-4? there is no such class
@FlavioCaruso Adding an empty would be a dirty fix, but what about small screen sizes where only one column appears at a time and then I will have last column as empty space?
You can add an id to the last column and a display none, i will change the Answer to show you.
I thought bootstrap supports not needing the empty one? jsfiddle.net/sbp8zdon
@MaihanNijat no need media query, bootstrap classes already contain the needed ones to show/hide element on different screen sizes
1

You don't need custom CSS for this. You should use the already defined responsive bootstrap classes for displaying. Also another .row is not needed but could be useful for another row.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      1
    </div>
    <div class="col-md-4">
      2
    </div>
    <div class="col-md-4">
      3
    </div>
    <div class="col-md-4">
      4
    </div>
    <div class="col-md-4">
      5
    </div>
    <div class="col-md-4 d-none d-lg-block">
      6
    </div>
  </div>
</div>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.