Soyuz - Bootstrap 4x + Laravel Admin Dashboard Template

EN
English German France Russian
3
2
Notifications
- N
  
  New trends for you
  
  10 min ago
- John birthday today
  
  Today, 12:00 AM
- T
  
  This is start of your story
  
  Yesterday, 01:25 PM
- Admin has 1 new like
  
  5 Feb 2020, 03:31 PM
John Doe
John Doe
My Profile

Email

Logout

Grids

Grid options

While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size. See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# of columns	12
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Column ordering	Yes

Grid Example

Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns within any `.row`.

.col-sm-1

.col-sm-2

.col-sm-3

.col-sm-4

.col-sm-6

.col-sm-12

Variable width content

Use `col-{breakpoint}-auto` classes to size columns based on the natural width of their content.

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

Reordering

Use `.order-` classes for controlling the visual order of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `12` across all five grid tiers.

First, but unordered

Second, but last

Third, but first

There are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 13` (`order: $columns + 1`), respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed.

First, but last

Second, but unordered

Third, but first

Offsetting columns

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.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

Nesting

To nest your content with the default grid, add a new `.row` and set of `.col-sm-` columns within an existing `.col-sm-` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

Horizontal alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

One of two columns

Vertical alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

One of three columns

Settings

New Order Notification

Low Stock Alerts

Vacation Mode

Order Tracking

Newsletter Subscription

Show Review

Enable Wallet

Sales Report

Select Account

John

Kate

Mark

Add

CRM

eCommerce

Hospital

UI Kits

Pages

Grids

Grid options

Grid Example

Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns within any `.row`.

Variable width content

Use `col-{breakpoint}-auto` classes to size columns based on the natural width of their content.

Reordering

Use `.order-` classes for controlling the visual order of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `12` across all five grid tiers.

There are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 13` (`order: $columns + 1`), respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed.

Offsetting columns

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.

Nesting

To nest your content with the default grid, add a new `.row` and set of `.col-sm-` columns within an existing `.col-sm-` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Horizontal alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

Settings

New Order Notification

Low Stock Alerts

Vacation Mode

Order Tracking

Newsletter Subscription

Show Review

Enable Wallet

Sales Report

Select Account

John

Kate

Mark

Add

CRM

eCommerce

Hospital

UI Kits

Pages

Notifications

New trends for you

John birthday today

This is start of your story

Admin has 1 new like

John Doe

Grids

Grid options

While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size. See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Grid Example

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns within any .row.

Variable width content

Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.

Reordering

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.

Offsetting columns

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.

Nesting

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Horizontal alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns within any `.row`.

Use `col-{breakpoint}-auto` classes to size columns based on the natural width of their content.

Use `.order-` classes for controlling the visual order of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `12` across all five grid tiers.

There are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 13` (`order: $columns + 1`), respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed.

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.

To nest your content with the default grid, add a new `.row` and set of `.col-sm-` columns within an existing `.col-sm-` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).