@extends('admin/layouts/default') {{-- Page title --}} @section('title') Grid @parent @stop {{-- page level styles --}} @section('header_styles') @stop {{-- Page content --}} @section('content')

Grid layout

  1. Dashboard
  2. UI Features
  3. Grid layout

Bootstrap grid Examples

we created some grid samples now you can examine in your browser. This first grid is using all 4 grid sizes combined in a single row. second grid indicates xs Grid,Third grid indicates sd Grid,fourth grid indicates md,fifth grid indicates lg.

lg indicates that the large grid displaying. The grid stacks horizontally < 1200px.

md indicates that the medium grid displaying. The grid stacks horizontally < 992px.

sm indicates that the small grid displaying. The grid stacks horizontally < 768px.

xs indicates that the extra small grid displaying. This grid is always horizontal.

.col-lg-4 .col-md-1 .col-sm-3 .col-xs-4
.col-lg-4 .col-md-5 .col-sm-3 .col-xs-4
.col-lg-4 .col-md-6 .col-sm-6 .col-xs-4

xs Grid

.col-xs-5

.col-xs-4

.col-xs-3

sm Grid

.col-sm-2

.col-sm-4

.col-sm-6

md Grid

.col-md-1

.col-md-5

.col-md-6

lg Grid

.col-lg-4

.col-lg-4

.col-lg-4

Bootstrap grid

.col-lg-12
.col-lg-6
.col-lg-6
.col-lg-4
.col-lg-4
.col-lg-4
.col-lg-3
.col-lg-3
.col-lg-3
.col-lg-3
.col-lg-2
.col-lg-2
.col-lg-2
.col-lg-2
.col-lg-2
.col-lg-2
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-8
.col-lg-4
.col-lg-3
.col-lg-6
.col-lg-3
.col-lg-12
.col-lg-6
.col-lg-3
.col-lg-2
.col-lg-1
@stop {{-- page level scripts --}} @section('footer_scripts') @stop