@extends('layouts.master') @section('title')Unikit @endsection @section('body-start') @endsection @section('content') @section('breadcrumb') @component('components.breadcrumb') @slot('li_1') UI Kit @endslot @slot('title') Grid @endslot @endcomponent @endsection

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Container `max-width`	None (auto)	540px	720px	960px	1140px	1320px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# of columns	12
Gutter width	1.5rem (.75rem on left and right)
Custom gutters	Yes
Nestable	Yes
Column ordering	Yes

Sm Grid-Example

Columns collapse at 576px

.col-sm-3

Md Grid-Example

Columns collapse at 768px

.col-md-3

.col-md-6

.col-md-3

Lg Grid-Example

Columns collapse at 992px

.col-lg-6

Xl Grid-Example

Columns collapse at 1200px

.col-xl-4

XXl Grid-Example

Columns collapse at 1400px

.col-xxl-6

Grid-Example

Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices.

.col-sm-1

.col-sm-2

.col-sm-3

.col-sm-4

.col-sm-6

.col-sm-12

Offset (Max-Auto)

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns. With the move to flexbox in v4, you can use margin utilities like .mr-auto to force sibling columns away from one another.

.col-sm-8 offset-sm-2

.col-sm-3 ml-auto

.col-sm-3

.col-sm-3 offset-sm-3

@endsection @section('script') @endsection @section('body-end') @endsection