Neumorphism in Bootstrap!

Bootstrap 4 components in neumorphism design.

Developed by Paul George

Alerts
Elevated Alerts
Badges

Example paragraph New

Notifications 4
Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark
Breadcrumb
Elevated Breadcrumb
Buttons
Action Another action Something else here
Action Another action Something else here
Separated link
Cards
Card image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap
Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link
Card image
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Featured
Special title treatment

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

Go somewhere
2 days ago
Featured
Special title treatment

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

Go somewhere
2 days ago
Basic Carousel
https://picsum.photos/700/400
https://picsum.photos/700/400
https://picsum.photos/700/400
Carousel with controls
Carousel with indicators
Carousel with captions
Carousel with ccross fade effect
Collapse

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Accordion
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the .show class.
Some placeholder content for the second accordion panel. This panel is hidden by default.
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
Jumbotron

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

List Group
  • Cras justo odio
  • Dapibus ac facilisis in
  • Disbaled
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1
List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Input
.com
Radio Buttons
Search Box