CODEWITHSUNDEEP
htmlcsstwitter-bootstrapflexboxbootstrap-4
HarshvardhanSharma
HarshvardhanSharma

Reputation: 786

How to wrap containers to fit below the top containers when window width decreases in bootstrap 4?

I am new to bootstrap 4 and haven't worked on bootstrap 3 much either.

When I assign a class col-(breakpoint)-(span) to div(s), they don't automatically arrange in a single row or adjust according to the width of the window, instead they remain left aligned and stacked on top of one another. So I assign CSS flex property to the parent container and that does the trick.

Now to make these wrap according to the window size I assign classes according to bootstrap 4 grid system, but that does not make the containers wrap to the next row. Instead the combined width of the flex-items exceeds the width of the window, enabling sideways(x-axis) scroll.

What I want is that the first two containers remain in one row and last two wrap to another row on smaller screen widths(phone portrait, <576px).

 <div style="display:flex;">
    <div class="col-sm-3 col-6"></div>
    <div class="col-sm-3 col-6"></div>
    <div class="col-sm-3 col-6"></div>
    <div class="col-sm-3 col-6"></div>
 </div>

Where am I going wrong?

Upvotes: 0

Views: 450

Answers (2)

Osama Kacem
Osama Kacem

Reputation: 41

Try this to remove the style attribute that contais flex and add instead a class="row" and for the child divs replace the classes with this class="col-lg-3 col-md-3 col-6"

Upvotes: 0

simPod
simPod

Reputation: 13486

Use all necesarry grid classes, see the docs https://getbootstrap.com/docs/4.0/layout/grid/

You have to wrap all cols in row and rows in container (.container or .container-fluid)

<div class="container">
  <div class="row">
    <div class="col-sm-3 col-6">x</div>
    <div class="col-sm-3 col-6">y</div>
    <div class="col-sm-3 col-6">z</div>
    <div class="col-sm-3 col-6">a</div>
  </div>
</div>

Upvotes: 1

Related Questions