--- url: https://bullframecss.marcopontili.com/layout.md --- # Layout Bullframe CSS provides a flexible container system and grid layout utilities. ## Containers ### Standard Container The `.bf-container` class creates a centered container with a max-width of 1140px: ```html

``` ### Fluid Container Use `.bf-container--fluid` for a full-width container: ```html

``` ### Responsive Containers Containers can collapse at specific breakpoints: ```html

Collapses at 575px and below

Collapses at 991px and below

Collapses at 1199px and below

``` ## Grid System Bullframe CSS uses a 12-column flexbox grid system. ### Basic Grid ```html

Full width

Half width

One third

``` ### Column Classes Available column classes: `bf-col-1` through `bf-col-12`. ### No Gutters Remove grid gutters with `.bf-no-gutters`: ```html

No gutter

``` ## Display Utilities ```html

Block

Inline

Inline block

Flex

Inline flex

Block centered

``` ## Flex Utilities ```html

Flex wrap

Flex nowrap

Justify start

Justify center

Justify end

``` ## Float Utilities ```html

Float left

Float right

Clear floats

``` ## Position Utilities ```html

Relative

Fixed

Sticky

``` ## Width Utilities ```html

25% width

33% width

50% width

75% width

100% width

Auto width

``` ## Visibility Utilities ```html

Visible

Invisible (takes up space)

Hidden (no space)

Hide

```