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":"Spacing and Layout Utilities"}],["$","div",null,{"dangerouslySetInnerHTML":{"__html":"

Bootstrap offers utility classes for margins, padding, alignment, display, and more.

Margin and Padding

.mt-3  // margin-top: 1rem\n.p-2   // padding: 0.5rem

Display & Flex

.d-flex\n.justify-content-center\n.align-items-start

Example

<div class=\"d-flex justify-content-center mt-5\">\n  <div class=\"p-3 bg-light\">Centered box</div>\n</div>

"}}],["$","div",null,{"style":{"marginTop":"3rem","display":"flex","justifyContent":"space-between","width":"100%"},"children":[["$","a",null,{"href":"/learn/bootstrap/layout/breakpoints","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/typography/text","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 →"}]]}]]}]