Bones UI Bootstrap

pub package CI GitHub Tag New Commits Last Commits Pull Requests Code size License

Adds Bootstrap to Dart package Bones UI, allowing use of Bootstrap components and CSS.

Embedded JavaScript Libraries

This package automatically loads (and bundles) the necessaries JavaScript libraries for Bootstrap.

  • Bootstrap: 4.4.1
  • JQuery: 3.5.1
  • Moment: 2.25.2

NOTE: You don't need to add any HTML or JavaScript code to your project to have full integration of Bootstrap with Bones_UI.


A simple usage example:

import 'dart:html';

import 'package:bones_ui/bones_ui.dart';
import 'package:bones_ui_bootstrap/bones_ui_bootstrap.dart';

class MyUI extends UIRoot {
  MyUI(Element rootContainer) : super(rootContainer);

  void configure() {

  UIComponent renderContent() {
    return MyPage(content) ;


class MyPage extends UIComponent {
  MyPage(Element parent) : super(parent);

  dynamic render() {
    return [
      $header(content: '''
        <nav class="navbar navbar-dark fixed-top bg-dark">
          <a class="navbar-brand" href="#">Fixed navbar</a>
      $div(classes: 'container', content: '''
        <h1 class="mt-5">Welcome</h1>
        This is <b>Bones_UI</b> with <b>Bootstrap</b>!
          classes: 'footer fixed-bottom',
          content: [
              classes: 'container text-muted pb-2',
              content: 'Copyright © ${ } Some Example')

void main() {

  var output = document.querySelector('#output');

  var myUI = MyUI( output ) ;
  myUI.initialize() ;


Bootstrap Icons

You can use class BootstrapIcons to load SVG icons of Bootstrap Icons.

  var iconName = 'person-fill' ;
  var iconPath = BootstrapIcons.getIconPath(iconName) ;
  var svg = UISVG(parent, iconPath, width: '1.5em', color: '#0000FF', title: 'User') ;

Features and bugs

Please file feature requests and bugs at the issue tracker.


This is an open-source project from Colossus.Services: the gateway for smooth solutions.


Graciliano M. Passos: gmpassos@GitHub.


Apache License - Version 2.0