20
20
UI Features
- Dashboard
- Email 78
- Skin Playground
-
Starting Layouts
- Layout Simple
- Layout Simple Medium Profile
- Layout Double SideNav
- Layout Hide RightNav
- Layout Medium No Header
- Layout RightNav
- Layout Menu Tab
- Layout Without Subtitle
- Layout Middle
- Layout Boxed
- Layout Full No Responsive
- Layout Middle No Responsive
- Boxed No Responsive
- Boxed Custom Width No Responsive
- Layout Fixed Nav
- No Header Fixed Nav
-
Nav Variations
- Custom Functions
- Forms
- UI Elements
- List & Tables
- Charts
- Maps
- Gallery
- Extra Pages
- Front End
- Buy This Theme
- Home
- List & Tables
- Grid List
Grid List
Grid List is tile like list responsively adapt to screen sizeContent List & Content Grid Class
Using our "content-list" combination with "content-grid" class you can easily create a grid list with custom width, custom height, and custom column size responsive effect that fit perfectly with bootstrap responsive value. Below is table for responsive explanation and class.
Width Responsive Table (used for megamenu width)
| Column Width | Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) |
|---|---|---|---|---|
| 60px | width-xs-1 |
width-sm-1 |
width-md-1 |
width-lg-1 |
| 180px | width-xs-2 |
width-sm-2 |
width-md-2 |
width-lg-2 |
| 240px | width-xs-3 |
width-sm-3 |
width-md-3 |
width-lg-3 |
| 320px | width-xs-4 |
width-sm-4 |
width-md-4 |
width-lg-4 |
| 480px | width-xs-5 |
width-sm-5 |
width-md-5 |
width-lg-5 |
| 720px | width-xs-6 |
width-sm-6 |
width-md-6 |
width-lg-6 |
| 1130px / full-width | width-xs-full |
width-sm-full |
width-md-full |
width-lg-full |
Height Responsive Table
| Column height | Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) |
|---|---|---|---|---|
| 60px | height-xs-1 |
height-sm-1 |
height-md-1 |
height-lg-1 |
| 180px | height-xs-2 |
height-sm-2 |
height-md-2 |
height-lg-2 |
| 240px | height-xs-3 |
height-sm-3 |
height-md-3 |
height-lg-3 |
| 320px | height-xs-4 |
height-sm-4 |
height-md-4 |
height-lg-4 |
| 480px | height-xs-5 |
height-sm-5 |
height-md-5 |
height-lg-5 |
| 720px | height-xs-6 |
height-sm-6 |
height-md-6 |
height-lg-6 |
Column Responsive Table
| Column Total | Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) |
|---|---|---|---|---|
| 1 Column | column-xs-1 |
column-sm-1 |
column-md-1 |
column-lg-1 |
| 2 Columns | column-xs-2 |
column-sm-2 |
column-md-2 |
column-lg-2 |
| 3 Columns | column-xs-3 |
column-sm-3 |
column-md-3 |
column-lg-3 |
| 4 Columns | column-xs-4 |
column-sm-4 |
column-md-4 |
column-lg-4 |
| 5 Columns | column-xs-5 |
column-sm-5 |
column-md-5 |
column-lg-5 |
| 6 Columns | column-xs-6 |
column-sm-6 |
column-md-6 |
column-lg-6 |
Example Column Total From 6(lg) to 5(md) to 4(sm) to 3(xs)
-
Gabriella MontagnaSan Diego -
Jonathan FuzzySeattle -
Sakura HinataHawaii -
Rikudou SenninLas Vegas -
Kim KardiosunNew York -
Brad PitaSeattle -
Celline DiorLos Angeles -
Goerge Bruno MarzLas Vegas
3(lg) 2(md) to 3(sm) to 1(xs)
-
Gabriella MontagnaSan Diego
-
Jonathan FuzzySeattle
-
Sakura HinataHawaii
-
Rikudou SenninLas Vegas
-
Kim KardiosunNew York
-
Brad PitaSeattle
-
Celline DiorLos Angeles
-
Goerge Bruno MarzLas Vegas
