Container

Bootstrap's basic container component built with Svelte 5. Containers are used to contain, pad, and center content within a given viewport.

Playground

Experiment with the Container component by adjusting the props below:

Interactive Playground

Preview

Container Preview (colored to show boundaries)

Default Container (div element)

Resize the browser window to see how the container responds.

Controls

Element Type

Select the HTML element to use for the container.

Breakpoint

Select a breakpoint for the container, or leave empty for default container.

Fluid container

Makes the container full-width across all viewport sizes.

Code

            
            <Container>
  <!-- Content goes here -->
</Container>

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.

This is content inside the default container.

            
            <Container>
  <p>This is content inside the default container.</p>
</Container>

Fluid Container

Use isFluid={true} to create a full-width container that spans the entire width of the viewport.

This container is fluid and spans the full width of the viewport.

            
            <Container isFluid={true}>
  <p>This container is fluid and spans the full width of the viewport.</p>
</Container>

Responsive Containers

Responsive containers allow you to specify a container that is 100% wide until a specified breakpoint is reached, after which a max-width is applied for each of the higher breakpoints. Use the breakpoint prop to set the breakpoint.

container-sm (100% wide until small breakpoint - 576px)

container-md (100% wide until medium breakpoint - 768px)

container-lg (100% wide until large breakpoint - 992px)

container-xl (100% wide until extra large breakpoint - 1200px)

container-xxl (100% wide until extra extra large breakpoint - 1400px)

            
            <!-- Extra small (up to 575px) - full width, no gutters -->
<Container breakpoint="sm">
  <!-- Small (576px and up) - max-width: 540px -->
</Container>

<Container breakpoint="md">
  <!-- Medium (768px and up) - max-width: 720px -->
</Container>

<Container breakpoint="lg">
  <!-- Large (992px and up) - max-width: 960px -->
</Container>

<Container breakpoint="xl">
  <!-- Extra large (1200px and up) - max-width: 1140px -->
</Container>

<Container breakpoint="xxl">
  <!-- Extra extra large (1400px and up) - max-width: 1320px -->
</Container>

Container with Grid

Containers are the foundation of Bootstrap's grid system. Here's an example of using a container with Bootstrap's grid system:

col-sm-8

col-sm-4

col-sm

            
            <Container>
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</Container>

API Reference

Props

Name	Type	Default	Description
`breakpoint`	`string`	`undefined`	Sets the breakpoint at which the container becomes responsive. Values: 'sm', 'md', 'lg', 'xl', 'xxl'. When undefined, uses the default 'container' class.
`class`	`string`	`undefined`	Additional CSS classes to apply to the component.
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`isFluid`	`boolean`	`false`	Makes the container full-width spanning the entire viewport width

CSS Classes

The component applies Bootstrap's container classes based on the provided props:

container - Applied when breakpoint is not provided and isFluid is false
container-fluid - Applied when isFluid is true
container-{breakpoint} - Applied based on the breakpoint prop (sm, md, lg, xl, xxl)