Bootstrap Columns

3

I have a question on bootstrap (v4-alpha).

I created a <div class='row'></div> and within this div I have 4 elements side by side.

<div class='col-3'>

I wanted a breakpoint that at one point displays only two elements side by side. But I can only do the column break where the element is displayed alone. How can I do this?

    
asked by anonymous 19.06.2017 / 15:21

1 answer

3

You can add other styles within the same element for different screen resolutions. You can find it in the Grid Options section of the Bootstrap documentation. I'll give you an example so you have an idea.

<div class="row">
  <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">Item1</div>
  <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">Item2</div>
  <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">Item3</div>
  <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">Item4</div>
</div>

That way I set it to:

(col-12) Extra small

19.06.2017 / 16:08