Bootstrap usage of col-x for multiple resolutions

Question

I have the following code:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="card">
      <div class="col-md-3" style="display: inline-block; float:left;">
        ... content ...
      </div>

      <div class="col-md-3" style="display: inline-block; float:left;">
        ... content ...
      </div>

      <div class="col-md-3" style="display: inline-block; float:left;">
        ... content ...
      </div>

      <div class="col-md-3" style="display: inline-block; float:left;">
        ... content ...
      </div>
    </div>
  </div>
</div>

These are 4 controls (inputs) and they display fine in desktop and mobile resolution, on desktop they are all next to each other and on mobile they are below each other.

I want it so that on smaller resolutions (mobile) there is 2 next to each other on the first line and 2 next to each other on the second line, but still in larger resolution they should display next to each other on 1 line, this for the purpose of "saving space", the controls don't need to take the complete line on there own because the input is limited.

I have tried but not succeeded to do so by playing with the col-md-x and by having less div's but I can't make it work.

How can I achieve this? Thank you for any direction or suggestion!

`col-md-x` is for medium width displays. If you want other display for different sizes why are you sticking with `md`? Have you read [the documentation](https://getbootstrap.com/docs/4.0/layout/grid/)? — Quentin, Mar 11 '20 at 20:16
@Quentin, I wasn't aware of this, thank you for pointing that out. — Dimitri, Mar 11 '20 at 20:22
@G-Cyrillus, yes that is correct. What would be a "better" way of doing this and why shouldn't I do it like I am doing? — Dimitri, Mar 11 '20 at 20:23
@Dimitri there is no better way, just use the class needed col requires a row ;) . tip was used for the below answer :) Mind the doc and usage, that's the way :) — G-Cyrillus, Mar 11 '20 at 20:28

Tzimpo · Accepted Answer · 2020-03-11T21:11:45.973

1

With col-6 on screens smaller than md your col-6 will put this divs 2 per row.I moved the row inside your card class

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="container">
 <div class="card">
<div class="row">
   
    <div class="col-6 col-md-3 col-lg-3 co-xl-3">     
     ... content ...
    </div>

    <div class="col-6 col-md-3 col-lg-3 co-xl-3" >                
     ... content ...
    </div>

    <div class="col-6 col-md-3 col-lg-3 co-xl-3" >
    ... content ...
    </div>

    <div class="col-6 col-md-3 col-lg-3 co-xl-3" >
     ... content ...
    </div>
</div>
</div>

edited Mar 11 '20 at 21:11

answered Mar 11 '20 at 20:16

Tzimpo

964
1
9
24

YES, that did it! Thank you all for your input and time! – Dimitri Mar 11 '20 at 20:24
@Dimitri! Great!! if you can tick it as answer to your question – Tzimpo Mar 11 '20 at 20:26
I needed to wait 5 minutes to do so :) – Dimitri Mar 11 '20 at 20:27
I am just realizing now that for a larger resolution this is also displaying it 2/row, but I want it to be in 1 line (next to each other) on a larger resolution and 2/row (like now) for a smaller resolution , is that possible? – Dimitri Mar 11 '20 at 20:32
1

Try to add on each div col-lg-3 co-xl-3 – Tzimpo Mar 11 '20 at 20:37
You sir maked my day! Thank you! – Dimitri Mar 11 '20 at 20:43

Bootstrap usage of col-x for multiple resolutions

1 Answers1