Avant UI

Avant UI is a development toolkit based on Bootstrap Framework. Avant UI maintains the Bootstrap simplicity, provides a new look and adds new features and components. Enjoy it!

Responsive image

Bootstrap on a new level

Enhanced

Avant UI enhances the look of Bootstrap making it more stylish and beautiful

Extra elements

New elements have been added to make the framework more complete

Fully customizable

The basis of the Avant UI is the Bootstrap, which makes it completely customizable

Core

Colors

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Facebook
Twitter
Linkedin
Pinterest
Youtube
Dribble
Behance
Github
Grad. blue
Grad. green
Grad. red
Grad. purple
Blue/Green
Blue/Purple
Red/Purple
Red/Orange

Buttons

Inputs, textarea and selects

Checkbox, radio, switch and slider

Badges

Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark
Heading New

Breadcrumbs

Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi justo ligula, varius et pharetra in, amet quis quam. Phasellus placerat augue et viverra porttitor habitant morbi tristique turpis egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi justo ligula, varius et pharetra in, amet quis quam. Phasellus placerat augue et viverra porttitor habitant morbi tristique turpis egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi justo ligula, varius et pharetra in, amet quis quam. Phasellus placerat augue et viverra porttitor habitant morbi tristique turpis egestas.

Alerts

Tables

# Name Middlename Surname
1 Lorem Quisque Amet
2 Ipsum Rutrum Tellus
3 Lectus Nulla Tempor
# Name Middlename Surname
1 Lorem Quisque Amet
2 Ipsum Rutrum Tellus
3 Lectus Nulla Tempor
# Name Middlename Surname
1 Lorem Quisque Amet
2 Ipsum Rutrum Tellus
3 Lectus Nulla Tempor
# Name Middlename Surname
1 Lorem Quisque Amet
2 Ipsum Rutrum Tellus
3 Lectus Nulla Tempor

Tabs and pills

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est nulla.

Tooltips

Hover or click on buttons to see the tooltips

Popovers

Click on buttons to see the popovers

Progress

25%
50%
75%
100%

Loadings

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Modal

Toasts

Thumbnails

Thumbnail
Thumbnail
Thumbnail
Thumbnail
Thumbnail
Thumbnail

Carousels

Cards

image
Seashore

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla diam non vestibulum tristique molestie ipsum.

image

Sed laoreet lectus sed erat vulpu tate, vi tae interdum lorem suscipit faucibus dui.

Task list
image

Duis sed est ac dolor maxi mus tinci dunt. Donec in sem neque congue risus vitae.

Learn more
image NEW
Architecture

Nam magna sapien, fermen tum non lib ero at, blandit euismod ex est ac dolor.

More info
Quisque porttitor maximus massa, in feugiat libero enim faucibus.
More news 10k views
Avatar image
Jonh Doe Co-founder

Nulla felis dolor, place rat id magna ac trist ique trist ique erat volut pat sed.

Scelerisque

Nulla faci lisi. Duis sed est ac dolor max imus tinc idunt. Donec in sem neque. Pel len tesque nec est mattis, imper diet metus vel, laci nia nunc. Ut varius dia.

Economy
Investiments

Prae sent fermen tum magna at lectus viverra, eget finibus justo hend rerit.

Read more
image
Vintage item

Lorem ipsum dolor sit amet, consectetur.

Healthy teas

Lorem ipsum dolor sit amet, consectetur.

image

Typography

Display 1
Avant UI
Display 2
Avant UI
Display 3
Avant UI
Display 4
Avant UI
H1
Avant UI heading
H2
Avant UI heading
H3
Avant UI heading
H4
Avant UI heading
H5
Avant UI heading
H6
Avant UI heading
Paragraph

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Lead paragraph

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Primary text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Secondary text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Success text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Danger text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Warning text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Info text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Muted text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Extra elements

Avatars

Avatar image Avatar image Avatar image
Avatar image Avatar image Avatar image
Avatar image Avatar image Avatar image

Callouts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque diam orci, fringilla a faucibus sed, ultrices non diam. Donec mattis pellentesque consectetur. Quisque euismod semper orci quis iaculis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque diam orci, fringilla a faucibus sed, ultrices non diam. Donec mattis pellentesque consectetur. Quisque euismod semper orci quis iaculis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque diam orci, fringilla a faucibus sed, ultrices non diam. Donec mattis pellentesque consectetur. Quisque euismod semper orci quis iaculis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque diam orci, fringilla a faucibus sed, ultrices non diam. Donec mattis pellentesque consectetur. Quisque euismod semper orci quis iaculis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque diam orci, fringilla a faucibus sed, ultrices non diam. Donec mattis pellentesque consectetur. Quisque euismod semper orci quis iaculis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque diam orci, fringilla a faucibus sed, ultrices non diam. Donec mattis pellentesque consectetur. Quisque euismod semper orci quis iaculis.
Callout heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque diam orci, fringilla a faucibus sed, ultrices non diam. Donec mattis pellen.

More info
Callout heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque diam orci, fringilla a faucibus sed, ultrices non diam. Donec mattis pellen.

More info

Comments

author image
John Doe
7 days ago Reply Share
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras lit purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus efficitur nunc odio ut sed tortor.
author image
Jane Doe
7 days ago Reply Share
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras lit purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac.
author image
John Doe
5 days ago Reply Share
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras lit purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue.
author image
Richard Roe
5 days ago Reply Share
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras lit purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue.

Dividers

Font Awesome icons

More free icons

Icon lists

  • List icon item
  • List icon item
  • List icon item
  • List icon item
  • List icon item
  • List icon item
  • List icon item
  • List icon item
  • List icon item
  • List icon item
  • List icon item
  • List icon item
  • List icon item
  • List icon item
  • List icon item
  • List icon item

Ratings

Statistics

1500

Sales

VIEWS

9750

1230

likes

2200

Members

Steps

1

Payment

2

Billing

3

Confirmation

Shipping

Billing

Confirmation

Shipping

Billing

Confirmation

Demos

Get Avant UI for free

Avant UI can be yours for free.