Bootstrap speakers

Question

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

I created a <div class='row'></div> and within this div possessed 4 elements on each other’s side.

<div class='col-3'>

I wanted a breaking point that at a certain point displays only two elements on each other’s side. But I can only break the column where the element is displayed alone. How can I do this?

Answer 1

You can add other styles within the same element for different screen resolutions. You can find in the section Grid Options in the Bootstrap documentation. I’ll put an example to give you 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 out to :

(col-12) Extra small <576px

(col-Sm-6) Small 576px

(col-Md-6) Medium 768px

(col-lg-3) Large 992px

(col-Xl-3) Extra large 1200px

This way it will break the display of Divs according to the width of the page.