Pages

Components
Templates soon
Sign in
Register

Support

Documentation soon
Changelog
Licence
Terms soon
Privacy Policy soon

Community

Newsletter
X

Bootstrap Wireframe

Long live Bootstrap and its contributors! Show them some love and appreciation.

Version	v1.0
Update	Aug 31, 2024

2025 - Bootstrap Wireframe ©

Shapes transitions

HTML
CSS

Shapes transitions html Code

Section title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, ducimus.

Section title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, ducimus.

Shapes transitions css Code

.shape { position: absolute; pointer-events: none; } .shape > * { display: block; } .shape-top { top: -1px; right: 0; left: 0; } .shape-top > * { transform-origin: bottom center; } .shape-end { top: 0; right: -1px; bottom: 0; left: 0; } .shape-end > * { position: inherit; top: inherit; bottom: inherit; right: inherit; transform-origin: center left; } .shape-bottom { right: 0; bottom: -1px; left: 0; } .shape-bottom > * { transform-origin: top center; } .shape-bottom-100 { right: 0; bottom: 100%; left: 0; } .shape-bottom-100 > * { transform-origin: top center; } .shape-start { top: 0; right: 0; bottom: 0; left: -1px; } .shape-start > * { position: inherit; top: inherit; bottom: inherit; left: inherit; transform-origin: center right; } .shape-fluid-x > * { width: 100%; height: auto; } .shape-fluid-y > * { width: auto; height: 100%; } .shape-flip-x { transform: scaleX(-1); } .shape-flip-y { transform: scaleY(-1); }