These examples highlight various button styles built using core classes from Bootstrap. Each option follows a minimalist approach with consistent spacing and thoughtful emphasis.
Primary buttons often serve the main action on a page—like submitting a form.
The .btn-primary class offers a more noticeable style without being overwhelming.
Secondary buttons support the primary action by providing alternatives in a less prominent style. By customizing Bootstrap's button classes, styles like outline, ghost, and text-only can be used to control visual hierarchy.
When the icon alone communicates the action, removing text can save space and keep the interface streamlined. These icon-only buttons use the same Bootstrap classes, ensuring consistent sizing and spacing.
When an action takes time, adding a loading spinner or bar can prevent confusion. Any Bootstrap button variant can integrate a loading indicator, making asynchronous tasks clearer.
A collection of card components built on monochromatic design principles. Each variant uses subtle shadows and spacing to establish hierarchy while maintaining a clean, minimalist interface.
The fundamental card layout for simple content presentation. Clean and minimal design focusing on content.
This is a sample card text that shows how content would look in this space.
Enhanced card variant with a header section for additional context or categorization.
This is a sample card text that shows how content would look in this space.
Cards with visual content integration, perfect for media-rich interfaces while maintaining our minimal aesthetic.
This is a sample card text that shows how content would look in this space.
A horizontal layout variant ideal for list views and content with side-by-side image and text arrangements.
This is a wider card with supporting text below as a natural lead-in to additional content.
Impactful, content-focused hero sections that establish visual hierarchy through typography and space. Each variant maintains our minimalist aesthetic while creating compelling entry points for your content.
A clean, centered layout emphasizing typography and clear call-to-action. Perfect for straightforward messaging.
Create beautiful, functional interfaces with our minimalist component library. Built for modern applications.
Bold, impactful layout with strong typography and clear action paths. Ideal for product launches, main pages, and key announcements.
A focused collection of UI components built on monochromatic design principles. Each element uses subtle tonal shifts and considered spacing to maintain a clean, minimalist interface.
Two-column layout balancing content and visual elements. Ideal for products and services with supporting imagery.
Elevate your web applications with our thoughtfully crafted components. Clean, accessible, and ready for production.
Ultra-minimal design focusing purely on typography. Perfect for text-heavy content or editorial contexts.
When less truly means more.
Subtle monochromatic gradient background adding depth while maintaining minimalism.
Where sophistication meets simplicity.
An elegant layout featuring subtle radial accents and layered depth. Perfect for premium experiences where refined visual detail enhances the message.
Where subtle depth and thoughtful typography come together to create an elevated, sophisticated experience.
An artisanal hero section featuring subtle coffee-inspired organic patterns and stains, creating a warm, sophisticated atmosphere while maintaining minimalist principles.
Where precision meets organic beauty. Each element carefully considered, like the perfect pour-over.
A surrealist Dali-inspired hero section featuring melting elements, distorted shapes, and dreamlike qualities.
Where reality bends and dreams take form. Time melts away as imagination flows freely through every pixel.
A Gaudi-inspired hero section featuring organic architecture elements, mosaic patterns, and flowing curves reminiscent of Casa Batlló and Sagrada Familia.
Where nature meets design, curves flow like water, and every detail tells a story of artistic vision.
A hero section with prominent bullet points, perfect for highlighting key features or benefits.
Clean, focused modal dialogs that maintain our minimalist aesthetic through careful use of white space, typography, and subtle shadows. Built on Bootstrap's modal functionality for reliable interaction.
A simple, clean modal dialog perfect for focused content and actions.
A vertically centered variant for more balanced visual presentation.
A compact modal for confirming user actions with clear, focused messaging.
A clean, positive confirmation dialog that emphasizes completion through typography and iconography.
An elegant modal variation with subtle gradient effects and dynamic textures. Add the modal-gradient class
to any modal to apply this style.
An engaging modal that combines success messaging with delightful celebration effects.
Use modal-celebration class with celebration data attributes for different effects.
Modals come in different sizes to accommodate various content needs, from small dialogs to full-width presentations.
Essential form components crafted with precision and clarity. Each element employs subtle grayscale variations and thoughtful spacing to create an intuitive, distraction-free input experience that prioritizes user focus.
The fundamental form input layout with label and placeholder text. Clean and minimal design focusing on content.
Multiple form inputs grouped together for related information collection.
Different states for form inputs including valid, invalid, and disabled variations.
A complete login form showcasing input groups, spacing, and button integration in a cohesive layout.
Don't have an account yet? Sign up
Custom styled dropdown menus that maintain Bootstrap's functionality while adding elegant transitions and a refined aesthetic.
A simple dropdown menu that provides a clean list of options. Perfect for navigation menus, settings, or any list of actions.
An enhanced dropdown designed for user profiles, combining user information with quick access to common account-related actions. Ideal for dashboards and user account management.
Alerts provide important feedback and notifications to users. Using color accents and meaningful icons, these alerts effectively communicate different message types while remaining unobtrusive.
Essential alert variants using subtle color accents and meaningful icons. Primary alerts for critical messages, secondary for information, and success for confirmations.
Interactive alerts with a close button, perfect for temporary notifications or messages that can be dismissed by the user.
Clean, minimal tables that prioritize content clarity and readability while providing clear data hierarchies and intuitive scanning patterns. On mobile devices, table content will scroll horizontally while maintaining readability and accessibility.
A foundational table design with clear typography and subtle borders. Perfect for straightforward data presentation and general use cases.
| Name | Position | Department | Status |
|---|---|---|---|
| Sarah Parker | UI Designer | Design | Active |
| James Wilson | Developer | Engineering | On Leave |
Alternating row backgrounds using table-striped class provides clear visual separation between rows. Add table-striped to your table element to improve readability and reduce eye strain when scanning large datasets. The subtle contrast between rows helps users track information across columns without losing their place.
| Project | Progress | Deadline | Status |
|---|---|---|---|
| Website Redesign |
|
Dec 20, 2024 | In Progress |
| Mobile App |
|
Jan 15, 2025 | Pending |
| Emily Chen | Product Manager | Product | Offline |
| Michael Brown | Data Analyst | Analytics | Training |
Add table-hover to your table class to create interactive tables with subtle hover states that
highlight the current row. Perfect for tables where users need to track across columns or interact with specific rows.
| Invoice | Client | Amount | Status |
|---|---|---|---|
| #INV-001 | Acme Corp | $1,200 | Paid |
| #INV-002 | TechStart Inc | $3,500 | Overdue |
Background effects that can be applied to any element using utility classes.
An artisanal background featuring subtle coffee-inspired organic patterns and stains, creating a warm, sophisticated atmosphere while maintaining minimalist principles.
This is a sample content with coffee background effect. The effect includes multiple layers of subtle gradients and patterns that work in both light and dark modes.
A surrealist background inspired by Salvador Dali's dreamlike aesthetics, featuring melting elements and floating objects that create an otherworldly atmosphere.
This is a sample content with the Dali-inspired background effect. The effect includes surreal elements and dreamlike patterns that work in both light and dark modes.
A sophisticated background inspired by the art of paper folding, featuring subtle creases and geometric patterns that create an elegant sense of depth and dimension while maintaining visual clarity.
This background creates a refined paper-like aesthetic through carefully placed folds and subtle textures, perfect for content that requires an sophisticated yet minimal presentation.
A minimalist background inspired by architectural blueprints and wireframes.
This background creates a refined design-system aesthetic through carefully placed grid patterns, perfect for showcasing UI components and creative processes.
Modern, minimal navigation components that maintain Bootstrap's functionality while adding refined aesthetics.
Modern, minimalist pricing tables with subtle hover effects and clear hierarchy.
A comprehensive pricing table with feature lists and prominent call-to-actions. Ideal for showcasing detailed plan comparisons.
A focused layout for highlighting a single pricing plan. Perfect for products with a straightforward pricing strategy.
Perfect for growing businesses and professional teams