Kertas
Toggle navigation
News:
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • 4

    • You have 4 pending tasks

    • Database Migration
      20%
      20% Complete
    • Mobile Development
      45%
      45% Complete
    • App Deployment
      80%
      80% Complete
    • Server Upgrade
      90%
      90% Complete
    • See all tasks
  • 3

    • You have 3 new messages

    • User Image Elaine Hernandez 1 min Hey, are you there?
    • User Image Larry Gardner 5 mins Have you finished your work?
    • User Image Tanya Mackenzie 2 hrs Don't forget to attend today's...
    • See all messages
  • 4

    • You have 4 new notifications

    • New user registered5 mins
    • Database overloaded 20 mins
    • Application error 1 hr
    • Server not responding 5 hrs
    • See all notifications
  • Me
    • My Account
    • My Calendar
    • My Inbox  3
    • Lock Screen
    • Log Out
User Image

Jeffrey Williams

Online
  • Dashboard
  • UI Elements
    • General
    • Buttons
    • Grid
    • Group List
    • Icons
    • Messages & Notifications
    • Modals
    • Tabs & Accordions
    • Typography
  • Forms
    • Components
    • Input Masks
    • Validation
    • Wizard
    • WYSIWYG Editor
    • Multi Upload
  • Tables
    • Basic Tables
    • Data Tables
  • Maps
    • Google Map
    • Vector Map
  • Charts
  • Pages
    • 404 Page
    • 500 Page
    • Blank Page
    • Blank Page Header
    • Calendar
    • Code Editor
    • Gallery
    • Invoice
    • Lock Screen
    • Login
    • Register
    • Search Result
    • Support Ticket
    • Timeline
    • User Profile
  • Email12
  • Frontend
  • Menu Levels
    • Level 1
    • Level 2
      • Sub Menu
      • Sub Menu
Grid System
  1. Home
  2. UI Elements
  3. Grid

Based on Bootstrap 3 grid system

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

Mobile, tablet, and desktop

col-xs-6
col-xs-6
col-lg-8
col-sm-6
col-sm-6
col-lg-6
col-md-6
col-md-6
col-lg-4
col-sm-6
col-sm-6

Grid style

Grid Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="grid"></div>

Grid No-border

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="grid no-border"></div>

Grid Solid Blue

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="grid no-border bg-blue"></div>

Grid Header Red

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="grid"><div class="grid-header bg-red"></div></div>

Grid Top Blue

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="grid top blue"></div>

Grid No-border Top Green

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="grid no-border top green"></div>

Grid Bottom Red

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="grid bottom red"></div>

Grid No-border Bottom Purple

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="grid no-border bottom purple"></div>

Grid Both Orange

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="grid top bottom orange"></div>

Grid No-border Both Black

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="grid no-border top bottom black"></div>