Bootstrap Widgets Ported to Web Components with Dart Web UI

The wildly successful Bootstrap project, which helps web developers build responsive designs for web apps, has been ported to Dart's Web UI library. This means the dynamic widgets like accordion, carousel, tabs, and more, are reborn as actual web components. The Dart Widgets library has all the code, and you can easily install it from pub.

With real encapsulation, you can now use custom components that contain the structure, style, and behavior of the widget. For example, instead of using div elements with special classes and requiring another script to make it all work, you can simply use <x-accordion> which contains everything you need.

Here is an example:



<x-accordion>
  <x-collapse>
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse">Item 1</a>
    </div>
    <p>Item 1 content - Lorem ipsum</p>
  </x-collapse>
  <x-collapse>
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse">Item 2</a>
    </div>
    <p>Item 2 content - Ut enim ad minim </p>
  </x-collapse>

Thanks to Kevin Moore for open sourcing this project. Get started building declarative modern apps with Widgets and Web UI today!