Community-built
Bootstrap CSS Components Library
Let's not stress about website designs. Create Stunning UIs Effortlessly, with Over 300+ Ready to Use Components
Bootstrap CSS Playground
Experience the power of Bootstrap CSS - Play around in our playground, with live preview and a user-friendly code editor that feels like VS code.
Create, Save, Share.
Make it yours - Create, save, share and organize your components with ease. Save your own designs, share them with others, and keep your favorites at hand for easy access.
Public Profile
Make a name for yourself - Create a good profile and showcase your web designing skills to the world.
Tags
-
26
-
19
-
17
-
14
-
14
-
14
-
14
-
12
-
11
-
11
-
11
-
11
Recent
-
Interactive left-Side Menu test
will need to be responsive
1 week ago281v.5.3 -
1 week ago226v.5.3
-
1 week ago224v.5.3
-
Beautiful Pricing Cards
My project in class
2 weeks ago94v.4.6 -
B- Bootstrap homepage with background color, hover effects, animations, and shadows added to enhance the design
B-Features Added: Background Gradient: A smooth gradient background using linear-gradient. Card Shadow and Hover Effect: The card now lifts up with a shadow (box-shadow) and smooth transition (transform) on hover. Button Customization: A custom round button with hover color change. Animation: The card content animates with a "fade-in-up" effect using keyframe animation.
2 weeks ago317v.4.6 -
1 month ago1.7kv.5.3
-
Notification alert
notification alert bootstrapt 5.3 # alert-imessage Alert message custom on bootstrap 5.3 # Example calls JS // imessage.show("Default Success!", "success"); // imessage.show("Top Center Message!", "info", "top-center"); // imessage.show("Bottom Right Warning!", "warning", "bottom-right"); // imessage.show("Bottom Left Error!", "fail", "bottom-left"); // imessage.show("Centered Notification!", "info", "center");
1 month ago423v.5.3 -
Product Card
Card diseñada para mostrar productos de forma atractiva y ordenada, inspirada en Mercado Libre. Incluye imagen fija, título uniforme, precio anterior tachado, precio actual con descuento y etiquetas promocionales como "Envío gratis". Incorpora un efecto hover con sombra acentuada y usa clases CSS para fácil integración y mantenimiento.
2 months ago294v.4.6 -
Sound Board
Sound Board
2 months ago309v.4.6 -
Form Wave
Form Wave
2 months ago259v.4.6 -
Split Landing Page
Split Landing Page
2 months ago355v.4.6 -
Scroll Animation
Scroll Animation
2 months ago510v.4.6 -
Blurry Loading
Blurry Loading
2 months ago675v.4.6 -
Hidden Search Widget
Hidden Search Widget
2 months ago380v.4.6 -
Rotating Navigation Animation
Rotating Navigation Animation
2 months ago623v.4.6 -
progress-steps
progress-steps
2 months ago330v.4.6 -
Expanding Cards
Expanding Cards
2 months ago989v.4.6 -
Bootstrap Tab Example
Bootstrap Tab Example Basic Part 1
2 months ago509v.5.3 -
2 months ago780v.5.3
-
Footer
Footer de Bootstrap con enlaces rápidos, contacto y redes sociales, usando íconos para mejor navegación. Diseño limpio y responsivo. 🚀
2 months ago708v.4.6 -
Profile Management Dashboard
profile management interface with personal information, security settings, and activity tracking in a modern design
2 months ago1.9kv.5.3 -
404 page template
with an animated illustration and a button to redirect to the homepage
2 months ago1.3kv.5.3 -
Accordion example with Bootstrap 5.3
accordion with animation
2 months ago1.2kv.5.3
F.A.Q
Who is responsible for creating and maintaining this library?
This library is a collaborative effort of the Bootstrap CSS community. It's created and updated by contributors.
Are the components in the library free to use in my projects?
Yes, all components in the library are completely free to use in your personal or commercial projects. They are shared under open-source licenses, which allow for free usage, modification, and distribution.
How do I use the components from the library in my project?
Each component in the library comes with code snippet. You can copy and paste the provided code from component page.
Can I contribute to the library?
Absolutely! We encourage contributions from the community. If you have Bootstrap CSS components or templates that you'd like to share, you can build and submit them to the library via Bootstrap CSS Playground . Be sure to follow our Contribution guidelines .
Keep Updated
Receive notifications about recently added high-quality components.