ProUI
avatar
John Doe
  • Dashboard
  • Widget Kit
  • Statistics
  • Social
  • Media
  • Design Kit
  • User Interface
    • Grid & Blocks
    • Typography
    • Buttons & Dropdowns
    • Navigation & More
    • Progress & Loading
    • Color Themes
  • Forms
    • General
    • Components
    • Validation
    • Wizard
  • Tables
    • General
    • Responsive
    • Datatables
  • Icon Sets
    • Font Awesome
    • Glyphicons Pro
  • Develop Kit
  • Components
    • 3 Level Menu
      • Link 1
      • Link 2
    • Maps
    • Charts
    • Gallery
    • Carousel
    • Calendar
    • CSS3 Animations
    • Syntax Highlighting
  • Ready Pages
    • Errors
      • 400
      • 401
      • 403
      • 404
      • 500
      • 503
    • Get Started
      • Blank
      • Blank Alternative
    • Search Results (4)
    • Article
    • User Profile
    • Message Center
      • Inbox
      • Compose Message
      • View Message
    • Timeline
    • FAQ
    • Pricing Tables
    • Invoice
    • Forum (3)
    • Login / Register
Activity
5 min ago
You had a new sale ($10)
10 min ago
Upgraded to Pro plan
3 hours ago
Running low on space
18GB in use 2GB left
Yesterday
New bug submitted
    • Header Style
    • Light Dark
    • Page Style
    • Default Alternative
    • Main Layout
  • avatar
    • Account
    • 10 Updates 5 Messages 3 Subscriptions 11 FAQ
    • Profile Settings
    • Logout
    • Activity
    • 5 min ago
      You had a new sale ($10)
      10 min ago
      Upgraded to Pro plan
      3 hours ago
      Running low on space
      18GB in use 2GB left
      Yesterday
      New bug submitted

Grid & Blocks
Create your pages using the flexible grid and the blocks!

  • User Interface
  • Grid & Blocks

Example Title

Example content..

  • Simple Action Another Action
  • Separated Action

Example Title

You can have a block with options to the top right..

  • Simple Action Another Action
  • Separated Action

Example Title

...or to the top left!

12 Column Grids

Grid .col-xs-* (never collapsing)

.col-xs-6

.col-xs-6

Grid .col-sm-* (collapsed at 768px)

.col-sm-6

.col-sm-6

Grid .col-md-* (collapsed at 992px)

.col-md-6

.col-md-6

Grid .col-lg-* (collapsed at 1200px)

.col-lg-6

.col-lg-6

Example

.col-sm-2

.col-sm-2

.col-sm-2

.col-sm-2

.col-sm-2

.col-sm-2

.col-sm-3

.col-sm-3

.col-sm-3

.col-sm-3

.col-sm-4

.col-sm-4

.col-sm-4

.col-sm-6

.col-sm-6

.col-sm-7

.col-sm-5

.col-sm-4

.col-sm-8

.col-sm-9

.col-sm-3

.col-sm-2

.col-sm-10

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate. Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque? Proin rhoncus dui at ligula vestibulum ut facilisis ante sodales! Suspendisse potenti. Aliquam tincidunt sollicitudin sem nec ultrices. Sed at mi velit. Ut egestas tempor est, in cursus enim venenatis eget! Nulla quis ligula ipsum. Donec vitae ultrices dolor?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate. Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque? Proin rhoncus dui at ligula vestibulum ut facilisis ante sodales! Suspendisse potenti. Aliquam tincidunt sollicitudin sem nec ultrices. Sed at mi velit. Ut egestas tempor est, in cursus enim venenatis eget! Nulla quis ligula ipsum. Donec vitae ultrices dolor?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate. Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque? Proin rhoncus dui at ligula vestibulum ut facilisis ante sodales! Suspendisse potenti. Aliquam tincidunt sollicitudin sem nec ultrices. Sed at mi velit. Ut egestas tempor est, in cursus enim venenatis eget! Nulla quis ligula ipsum. Donec vitae ultrices dolor?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate. Integer sed dolor erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate. Integer sed dolor erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate. Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque? Proin rhoncus dui at ligula vestibulum ut facilisis ante sodales! Suspendisse potenti. Aliquam tincidunt sollicitudin sem nec ultrices. Sed at mi velit. Ut egestas tempor est, in cursus enim venenatis eget! Nulla quis ligula ipsum. Donec vitae ultrices dolor?

Grid of Blocks in a Block

1/3

...

1/6

...

1/2

...

1/6

...

1/6

...

1/6

...

1/6

...

1/6

...

1/6

...

1/3

...

1/3

...

1/3

...

1/2

...

1/2

...

1/3

...

2/3

...

2/3

...

1/3

...

Crafted with by pixelcave
© ProUI 1.0

Settings

Vital Info

Admin

Password Update