Review the details before continuing.
The current breakpoint is: {currentBreakpoint != null ? BreakpointEnum[currentBreakpoint] : 'undefined'}
``` ## Render On Single Breakpoint Example ```html👋🏼😁 Hello Medium Screens
👋🏼😁 Hello Medium and Large Screens
The current breakpoint is: {onChangeCurrentBreakpoint != null ? BreakpointEnum[onChangeCurrentBreakpoint] : 'undefined'}
The previous breakpoint is: {onChangePreviousBreakpoint != null ? BreakpointEnum[onChangePreviousBreakpoint] : 'undefined'}
``` ## OnBreakUp Callback Example ```htmlThe breakpoint broke up from {onBreakUpFromBreakpoint != null ? BreakpointEnum[onBreakUpFromBreakpoint] : 'undefined'}
The breakpoint broke up to: {onBreakUpToBreakpoint != null ? BreakpointEnum[onBreakUpToBreakpoint] : 'undefined'}
``` ## OnBreakDown Callback Example ```htmlThe breakpoint broke down from {onBreakDownFromBreakpoint != null ? BreakpointEnum[onBreakDownFromBreakpoint] : 'undefined'}
The breakpoint broke down to: {onBreakDownToBreakpoint != null ? BreakpointEnum[onBreakDownToBreakpoint] : 'undefined'}
``` ## API Reference ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `currentBreakpoint` | `BreakpointEnum \| undefined` | `undefined` | Reference to the current breakpoint | | `isDisabled` | `boolean` | `false` | Disables the breakpoint monitor if set to true. | | `renderOn` | `BreakpointEnum \| BreakpointEnum[] \| undefined` | `undefined` | Controls whether the children are rendered based on the current breakpoint. | ### Events | Name | Type | Description | | --- | --- | --- | | `onChange` | `(changeEvent: ChangeEvent) => void` | Fired when the breakpoint changes. | | `onBreakUp` | `(breakEvent: BreakEvent) => void;` | Fired when the breakpoint is about to change to a larger size (at the start of the transition). | | `onBreakDown` | `(breakEvent: BreakEvent) => void;` | Fired when the breakpoint is about to change to a smaller size (at the start of the transition). | --- # Container > Bootstrap's basic container component built with Svelte 5. Containers are used to contain, pad, and center content within a given viewport. Source: https://bootstrap-svelte.vercel.app/layout/container — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt). ## Basic Example Containers are the most basic layout element in Bootstrap and are required when using the grid system. Choose from a responsive fixed-width container or a fluid-width container. ```htmlThis is content inside the default container.
This container is fluid and spans the full width of the viewport.
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.