# 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.

```html
<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.

```html
<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.

```html
<!-- 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:

```html
<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)