Bootstrap 5 Design System – UI Kit

Figma Resource


A Perfect Design System for Bootstrap 5+ Series


Atomic Design Mindset with Smart Implementation, you will never have to detach any instance, but still can have flexible content inside(even with complex structure) and keep all the design consistent, easy to maintain.


Carefully built with pixel perfect and super flexible to use, follow exactly newest Bootstrap document and guideline

for design and development.


  • COMPLETELY FREE

    – but –

    VALUABLE

    –

    Thousands hours spent

    , this Design System will save you much of time to craft new one. Kick start your next design with perfect pixel in no time.
  • Newest


    Bootstrap v5.1

  • Cover 100%



    Bootstrap Components


    – Naming convention with description/guide on each component, easy to find and add to design.

  • All Component Variants

    included, follow exactly

    Bootstrap CSS class/Options

    , well organized and consistent, ready to use and easy to

    handover

    to developer.

  • Pixel-perfect

    – We care every single pixel to make it perfect match with Bootstrap original design.

  • Coding mindset

    – We really think about the implementation when creating the Design System, that’s why we read every single line of Bootstrap document, css class, component options. To make sure the design is easily to implement and the implementation can follow exactly the design.
  • Fully

    Auto Layout (Latest version)

    to make whole Design System super flexible, speed up the design process.

  • Responsive

    – All components are resizable.

  • Interactive

    Components – Click on Present ▷ on each page to see examples with Ready Interactive Components. Easy to present to stakeholders and reference for developer.

  • Detailed Document

    with

    Example

    included for every single component

  • Atomic Design

    Mindset, well organize components and atoms. Bootstrap grids, colors, typography, all components are included and ready to use.

  • Easy to customize

    – Everything in Design System is easily to change: color, typography, border radius,… and the changes will be instantly applied across whole the system.

  • UI Kit

  • Continuous updated


?? Does this Design System save your time?


This Design System made with ❤ and thousands hours spent. Support to make it better!



Buy Me a Coffee



☕️


———-


08 May 2022

  • Typography updated


19 Apr 2022

  • Minor fixes


04 Apr 2022

  • Table updated
  • Other minor fixes


13 Mar 2022

  • Update Date & Time Picker Prototype that stop to add Button to this page
  • Other minor changes


20 Feb 2022

  • Update Bootstrap Icons to v1.8.1


16 Jan 2022

  • Add sample user avatar
  • Update Bootstrap Icons to v1.7.2
  • Add Grid sample pages


01 Dec 2021

  • Full Button Variants
  • Update Table with more flexible structure and easier to use
  • Color picker with Up/Down position of dropdown picker


29 Nov 2021

  • Flatten Icon Vectors
  • More Button Variants
  • Date/Time Picker, Select now have better dropdown interactions
  • Form updated with tooltip icon and better structure
  • All form fields now have valid/invalid status with interactions
  • Other minor bugs fixed

———-


Components


General:

  • Colors
  • Typography
  • Bootstrap Icons


Main Components:

  • Accordion
  • Alerts
  • Badge
  • Breadcrumb
  • Buttons
  • Button group
  • Card
  • Carousel
  • Close button
  • Collapse
  • Dropdowns
  • Divider
  • List group
  • Modal
  • Navs & tabs
  • Navbar
  • Offcanvas
  • Pagination
  • Placeholders
  • Popovers
  • Progress
  • Scrollspy
  • Spinners
  • Toasts
  • Tooltips


Form:

  • Select
  • Checks & Radios & Switch
  • Color Picker
  • Datalist
  • Input
  • Input Number
  • Range
  • Rate
  • Select
  • Transfer
  • Upload


Content:

  • Images
  • Tables
  • Figures


Extra:

  • Avatar
  • Comment
  • Empty
  • Tags


———-


Built with ❤ and a lot of ☕

Related Posts