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

Media

Example

Below is an example of a single media object. Only two classes are required—the wrapping `.media` and the `.media-body` around your content.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Order

Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the `order` property (to an integer of your choosing).

Media object

Alignment

Media in a media object can be aligned with flexbox utilities to the top (default), middle, or end of your `.media-body` content.

Top-aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Center-aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Bottom-aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Media list

Because the media object has so few structural requirements, you can also use these classes on list HTML elements. On your `<ul>` or `<ol>`, add the `.list-unstyled` to remove any browser default list styles, and then apply `.media` to your `<li>`s. As always, use spacing utilities wherever needed to fine tune.

List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Nesting

Media objects can be infinitely nested, though we suggest you stop at some point. Place nested `.media` within the `.media-body` of a parent media object.

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

Media

Example

Below is an example of a single media object. Only two classes are required—the wrapping `.media` and the `.media-body` around your content.

Media heading

Order

Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the `order` property (to an integer of your choosing).

Media object

Alignment

Media in a media object can be aligned with flexbox utilities to the top (default), middle, or end of your `.media-body` content.

Top-aligned media

Center-aligned media

Bottom-aligned media

Media list

List-based media object

List-based media object

List-based media object

Nesting

Media objects can be infinitely nested, though we suggest you stop at some point. Place nested `.media` within the `.media-body` of a parent media object.

Media heading

Media heading

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

Media

Example

Below is an example of a single media object. Only two classes are required—the wrapping .media and the .media-body around your content.

Media heading

Order

Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the order property (to an integer of your choosing).

Media object

Alignment

Media in a media object can be aligned with flexbox utilities to the top (default), middle, or end of your .media-body content.

Top-aligned media

Center-aligned media

Bottom-aligned media

Media list

List-based media object

List-based media object

List-based media object

Nesting

Media objects can be infinitely nested, though we suggest you stop at some point. Place nested .media within the .media-body of a parent media object.

Media heading

Media heading

Below is an example of a single media object. Only two classes are required—the wrapping `.media` and the `.media-body` around your content.

Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the `order` property (to an integer of your choosing).

Media in a media object can be aligned with flexbox utilities to the top (default), middle, or end of your `.media-body` content.

Media objects can be infinitely nested, though we suggest you stop at some point. Place nested `.media` within the `.media-body` of a parent media object.