Solid

A beautiful design system powered by Bootstrap 4.

by Vantage Design

Solid has a lot to offer to empower your development. Check out Solid's huge amount of premium components, handcrafted sections and beautiful example pages below, or have a look at the documentation! You may use Solid for free, or purchase the PRO version which includes more components, sections and example pages.

A ton of components

Buttons, alerts, inputs, carousels, toasts, popups, dropdowns, you name it, we have it. Create stunning interfaces without limits.

Handcrafted sections

Showcase your features, your team, product plans, testimonials, projects and much more with our premium prebuilt sections.

Beautiful example pages

Kickstart your project with our prebuilt pages. You only have to add content. Sounds great, right?

A ton of components

Buttons

Regular
Regular round
Outline
Outline round
Sizes
Groups
Disabled state
Social buttons PRO






































































Inputs

Input forms
Example help text. Lorem ipsum.
Example help text. Lorem ipsum.
Example help text. Lorem ipsum.
Example help text. Lorem ipsum.
Example help text. Lorem ipsum.
Example help text. Lorem ipsum.
Textareas
Checkboxes
Checkboxes
Radio buttons
Switches
Sliders
File browser
SelectPRO
Date & timePRO
TagsPRO
Example help text. Lorem ipsum.
Example help text. Lorem ipsum.

Navs

Tabs
This is tab one.
This is tab two.
This is tab three.
This is tab one.
This is tab two.
This is tab three.
Pills
This is tab one.
This is tab two.
This is tab three.
This is tab one.
This is tab two.
This is tab three.
This is tab one.
This is tab two.
This is tab three.
This is tab one.
This is tab two.
This is tab three.
PaginationPRO
Breadcrumbs

Navbars

Indicators

Progress
Alerts
ToastsPRO
Tooltips
PopoversPRO
Modals
Spinners
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...


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

Collapse

Regular

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Accordion
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Badges PRO

Standard
Primary Secondary Success Info Warning Danger Light Dark
Rounded
Primary Secondary Success Info Warning Danger Light Dark
As counter
Messages 9
With text

This is a h3 heading I am a badge

This is a h4 heading I am a badge

This is a h5 heading I am a badge

Typography

Display headings

Display 1

Display 2

Display 3

Display 4

Regular headings

This is a h1 heading I am a badge

This is a h2 heading I'm a subheading

This is a h3 heading I'm a subheading

This is a h4 heading I'm a subheading

This is a h5 heading I'm a subheading
This is a .h6 heading I'm a subheading
Paragraphs

This is a lead parapgraph. It is meant to stand out from regular parapgrahs. Lead paragraphs are created with the .lead class. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a regular paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at felis in enim ultrices ultrices. Donec suscipit mi purus, sed vestibulum tortor feugiat et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus elementum posuere turpis quis gravida. Nam tincidunt turpis dui, eget blandit odio dictum eu. Quisque suscipit justo diam, in vestibulum lectus molestie a. Nullam facilisis ipsum nec quam facilisis aliquet.

Blockquotes
Regular:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Reverse:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Tables

Normal
# First Name Last Name Role
1
Lorem Ipsum Staff
2
Jon Snow Bastard
3
Mouse the Bird Strange animal
Dark
# First Name Last Name Role
1
Lorem Ipsum Staff
2
Jon Snow Bastard
3
Mouse the Bird Strange animal

Images

Regular
Default
Image
A caption for the above image.
Round
Image
A caption for the above image.
Thumbnail
Image
A caption for the above image.
With overlay
Pattern 1
Image
Pattern 2
Image
Pattern 3
Image
Pattern 4
Image
Pattern 5
Image
Light color
Image
Medium color
Image
Strong color
Image

LightboxPRO

CarouselsPRO

Default
Gradient controls
Round controls & focused stage
Dark navigation dots

ParallaxPRO

Cards

Regular
Image

Static


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at felis in enim ultrices ultrices.

Image

Rotate


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at felis in enim ultrices ultrices.

Image

Backside


A rotating card, isn't that fancy?

Inverse
Image

Static


Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Image

Rotate


Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Image

Backside


A rotating card, isn't that fancy?

Some variations
List
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Header & footer
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Login

Feature
A ton of components.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at felis in enim ultrices ultrices.

Learn more
Highly customizable.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at felis in enim ultrices ultrices.

Learn more
Everything you need.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at felis in enim ultrices ultrices.

Footers

Your company

Here you can use rows and columns here to organize your footer content.

Useful links

© 2020 Copyright Vantage Design

Lists

List groups
Regular
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
Flush
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
Badges
  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1

Handcrafted sections PRO

Beautiful example pages PRO

Already in love with Solid?

That's great! You can use Solid for free, or use the PRO version instead with more components, and a ton of prebuilt sections and pages ready for your to use!

STANDARD

Free

  • A few components
  • No prebuilt sections
  • 1 example page
  • Standard support
Download now
PRO

From €49

  • A ton of custom components
  • 34+ prebuilt sections
  • 5 example pages
  • Premium support
Buy now

Why choose PRO?

While the standard version is already great, you might want to choose for the PRO version. Here's why.

A ton of custom components.

With even more custom components, you'll be able to create anything your heart desires. Badges, popovers, selects, date & time pickers, toasts, lightbox, carousels, and much more.

Handcrafted sections.

Prebuilt sections allow you to create stunning layouts in seconds. They're easily customizable and very flexible, as they're built with Bootstrap. Showcase your features, team, projects, testimonials, purchase plans, and much more.

Beautiful example pages.

With stunning prebuilt pages, you'll be able to start creating content immediately. Kickstart your project even faster and provide useful pages to your users, such as error pages, login pages, landing pages and more.

Premium support.

If issues exist with our products, we'll try to fix your issue and publish a patch version as soon as possible. We won't leave you out in the cold when you rely on us. That's our service.