Other Component general ui components

Ribbons

Use the ribbons as a simple mark

Type 1

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.
Type 2

Hidden wrapper

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.
Type 3

With shadow

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.
Type 4

Transparent

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.

Ribbons position

Pos 1

Top Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.
Pos 2

Top Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.
Pos 3

Bottom Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.
Pos 4

Bottom Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.

Ribbons color

Color 1

Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.
Color 2

Success

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.
Color 3

Info

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.
Color 4

Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.
Color 5

Danger

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.
Color 6

Lilac

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.
Color 7

Teals

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.
Color 8

Inverse

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.

Thumbnails

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

...

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

NO OK
...

Thumbnail table

 Table heading Table heading Table heading
Table cell Table cell Table cell
Table cell Table cell Table cell
Table cell Table cell Table cell
NO OK
...

Thumbnail progress bar

60% Complete (primary)
65% Complete (success)
70% Complete (info)
75% Complete (warning)
75% Complete (warning)
NO OK

Breadcrumbs

Indicate the current page's location within a navigational hierarchy.

  1. Home
  1. Home
  2. Library
  1. Home
  2. Library
  3. Data

Loader

Really cool loader available loader general version and flat version.

General : ... ... ... ... ... ... ... ... ... ...
Flat : ... ... ... ... ... ... ...

Star Ratings

Star ratings with very little code and no JavaScript.

Pagination

Provide pagination links for your site or app with the multi-page pagination component.

Default pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

Available variations

Add any of the below mentioned modifier classes to change the appearance of a label. For use stroke style just add .label-stroke

Default Primary Success Info Warning Danger Lilac Teal Inverse

Default Stroke Primary Stroke Success Stroke Info Stroke Warning Stroke

Danger Stroke Lilac Stroke Teal Stroke Inverse Stroke

1 2 3 4 5 6 7 8 9

Badges

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more. For use stroke style just add .badge-stroke

Default Primary Success Info Warning Danger Lilac Teal Inverse

Default Stroke Primary Stroke Success Stroke Info Stroke

Warning Stroke Danger Stroke Lilac Stroke Teal Stroke Inverse Stroke

Progress bars

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

progress-bar-primary
progress-bar-success
progress-bar-info
progress-bar-warning
progress-bar-danger
progress-bar-lilac
progress-bar-teals
progress-bar-inverse

Striped

Uses a gradient to create a striped effect. Not available in IE8

60% Complete (primary)
65% Complete (success)
70% Complete (info)
75% Complete (warning)
80% Complete (danger)
85% Complete (lilac)
90% Complete (teals)
95% Complete (inverse)

Animated

Add .active to .progress-striped. Not available in IE9 & below

60% Complete (primary)
65% Complete (success)
70% Complete (info)
75% Complete (warning)
80% Complete (danger)
85% Complete (lilac)
90% Complete (teals)
95% Complete (inverse)

Sizing

.progress-lg, .progress-sm, .progress-xs for additional sizes.

Stacked

Place multiple bars into the same .progress to stack them.

35% Complete (success)
20% Complete (warning)
10% Complete (danger)

Wells

Use the well as a simple effect on an element to give it an inset effect.

Small well

Look, I'm in a well!

Medium well

Look, I'm in a well!

Large well

Look, I'm in a well!
2014 - 2015 © Blankon Admin. Created by Djava UI, Yogyakarta ID 0.01 GB(0%) of 15 GB used