What is the class for min width using Bootstrap 5?

user_4214922 0
Viewed 3520
bootstrap-5
1 Answers

  • Bootstrap CSS Grid layout does the heavy lifting in terms of setting responsive breakpoints.

  • Each view/page/front-end element can be divided into 12 parts. and you can choose how much space a container takes out of 12 vertical columns.

  • Bootstrap 5 gives you 6 breakpoints pre-defined, with the following syntax

    col-xs-{number-between-1-to-12}  width <= 540px
    col-sm-{number-between-1-to-12}  max-width = 540px
    col-md-{number-between-1-to-12}  max-width = 720px
    col-lg-{number-between-1-to-12}  max-width = 960px
    col-xl-{number-between-1-to-12}  max-width = 1140px
    col-xxl-{number-between-1-to-12} width <= 1400px

Example 1: You get a parent div with 2 child divs, these children will take equal divided space inside for all screen sizes

<div id="i-am-a-parent-div"> 
    
   <div class="col-6"> This takes First Half the Space inside parent element</div>

   <div class="col-6"> This takes Second Half the Space inside parent element</div>

</div>

Example 2: The Children divs will share 6/12 space each till max-width=540, but then they will change space occupation to 4/12 and 8/12 respectively. NOTE: I've added two separated classes for each child div, you can add as many as needed for each breakpoint.

<div>
    <div class="col-sm-6 col-md-4"> This takes First Half (6/12) the Space inside parent element till max-width = 540px,
      BUT it will only take One-Thirds (4/12) the space between 540px & 768px </div>
    
    <div class="col-sm-6 col-md-8"> This takes Second Half (6/12) the Space inside parent element till max-width = 540px,
      BUT it will only take Two-Thirds (8/12) the space between 540px & 768px </div>
</div>

If this doesnt satisfy what you need to do, Then there are more customization options to their breakpoints, Feel free to checkout: https://v5.getbootstrap.com/docs/5.0/layout/grid/#grid-options

Let me know if this helps you out!

user_146598830
Related