Why my breaking point in bootstrap is not good grid not working

Question

I don't understand why my breaking point is at 800 px when i ask to be at 991 (lg and lower)in bootstrap 4 here is my code:

 <div class="container-fluid"> <div class="row"> <div class="col-xl-2 col-lg-6 fondNoir" id="menuTexte"> img</div> <div class="col-xl-2 col-lg-2 fondNoir" id="menuTexte"> Jeux</div> <div class="col-xl-2 col-lg-2 fondNoir" id="menuTexte"> Livres</div> <div class="col-xl-2 col-lg-2 fondNoir" id="menuTexte"> E-sport</div> <div class="col-xl-2 offset-xl-0 col-lg-2 col-md-2 col-sm-2 offset-sm-7 fondNoir" id="menuTexte"> Communauté</div> <div class="col-xl-2 col-lg-2 fondNoir" id="menuTexte"> Boutique</div> </div> </div>

Answer 1

None of your breaking points are at 800px. If you see closely, they are working just as you specified them. You need to understand how grid system works in bootstrap.

Bootstrap Grid System

Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (eg, .col-sm-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint).

If nothing is specified for a certain screen size, it will be defaulted to 12 grid size ( you can consider it to be defaulted to col-xs-12 if nothing is specifed)

---

Working of your Program

1. XL Screens:

   When your snippet is run on a extra large screen or xl (>1200px), each of the divs take 2 grids worth of space ( col-xl-2 will apply to all).

2. LG Screens:

   When you transition from large screen or lg (992px - 1200px), you have dropped below 1200px and now the col-lg will apply. So the grids will be divided as

   • Divisions -

   • 1st div - 6 grids ( col-lg-6 ).

   • 2nd to 4th divs - 2 grids each in first row( col-lg-6 ). Now all 12 grids of 1st row are used.
   • 5th and 6th divs - 2 grids( col-lg-6 ) each in second row.

3. MD Screens:

   When you go below 992px, you enter medium screen range(768px - 992px), the divs will be placed as per col-md or if not specified for range below lg , they will default to col-xs-12 . So the grids will be divided as

   • Divisions -

   • 1st div to 4th divs - 12 grids( defaulted to col-xs-12 since nothing is specifed )

   • 5th div - 2 grids offset by 7 ( col-md-2 and offset-sm-7 )
   • 6th div - 12 grids ( defaulted to col-xs-12 since nothing is specifed )

4. SM Screens:

   When you go below 768px, the divs will be given allocated grids just as in case of MD Screens since nothing is specified for sm screens.

5. XS Screens:

   When you go below 576px, the divs will all remain same except for the 5th div in which case the offset-sm-7 will no longer be applicable and all grids will align to the left occupying 12 grids each.

---

Hope you understand how your program is working and nothing is going abnormal or unexpected. If you still have any questions, ask in the comments.