7:["$","div",null,{"style":{"fontSize":"1.125rem","lineHeight":"1.75rem","fontFamily":"\"Inter\", sans-serif","display":"flex","flexDirection":"column","minHeight":"100vh","justifyContent":"space-between","padding":"2rem","color":"whitesmoke","maxWidth":"800px","margin":"0 auto"},"children":[["$","h1",null,{"style":{"fontSize":"1.75rem","marginBottom":"1rem"},"children":"Responsive Breakpoints"}],["$","div",null,{"dangerouslySetInnerHTML":{"__html":"

Bootstrap is mobile-first and includes five default responsive breakpoints:

xs: <576px
sm: ≥576px
md: ≥768px
lg: ≥992px
xl: ≥1200px

Example

<div class=\"col-sm-6 col-lg-4\">\n  Responsive Column\n</div>

This column will take half the row on small screens and a third on large screens.

"}}],["$","div",null,{"style":{"marginTop":"3rem","display":"flex","justifyContent":"space-between","width":"100%"},"children":[["$","a",null,{"href":"/learn/bootstrap/layout/grid","style":{"backgroundColor":"#3b82f6","padding":"0.75rem 2rem","borderRadius":"0.75rem","color":"#000","textDecoration":"none","fontWeight":500,"fontFamily":"\"Inter\", sans-serif","fontSize":"1rem","boxShadow":"0 2px 6px rgba(0, 0, 0, 0.1)"},"children":"← Prev"}],["$","a",null,{"href":"/learn/bootstrap/layout/utilities","style":{"backgroundColor":"#3b82f6","padding":"0.75rem 2rem","borderRadius":"0.75rem","color":"#000","textDecoration":"none","fontWeight":500,"fontFamily":"\"Inter\", sans-serif","fontSize":"1rem","boxShadow":"0 2px 6px rgba(0, 0, 0, 0.1)"},"children":"Next →"}]]}]]}]