bones_ui_bootstrap 2.1.1 icon indicating copy to clipboard operation
bones_ui_bootstrap: ^2.1.1 copied to clipboard


Adds Bootstrap 4+ support to Dart package bones_ui, allowing use of Bootstrap components and CSS.

Bones_UI Bootstrap #

pub package Null Safety Dart 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.6.1
  • Bootstrap Icons: 1.8.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.

Usage #

A simple usage example:

import 'dart:html';

import 'package:bones_ui/bones_ui_kit.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.

Colossus.Services #

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

Author #

Graciliano M. Passos: gmpassos@GitHub.

License #

Apache License - Version 2.0

pub points


unverified uploader

Adds Bootstrap 4+ support to Dart package bones_ui, allowing use of Bootstrap components and CSS.

Repository (GitHub)


API reference


Icon for licenses.Apache-2.0 (LICENSE)


amdjs, bones_ui, dom_builder, dom_tools, intl_messages, swiss_knife


Packages that depend on bones_ui_bootstrap