aussom-bs is a Bootstrap 5 component library written in Aussom-Script. It wraps every major Bootstrap 5 component as a native Aussom-Script class, so you can build Bootstrap UIs entirely in Aussom code without writing any HTML by hand.
Each class extends one of the built-in Aussom-Script HTML node classes (from hnodes.aus).
This means all the standard DOM methods you already know -- add(), setAttr(),
addClass(), setId(), and event listeners -- work on every aussom-bs object.
Include Bootstrap 5, the Aussom-Script runtime, and the aussom-bs library in your HTML page head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<!-- Aussom-Script runtime -->
<script type="text/javascript" src="js/aussom-script.js"></script>
<!-- aussom-bs library -->
<script type="text/aussom-script" src="aus/aussomBs.aus"></script>
</head>
<body onload="main()">
<div id="app"></div>
<!-- Bootstrap 5 JS (required for modals, dropdowns, toasts, etc.) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
Note: Because browsers block local cross-origin file loads, serve the page from a local web server during development. If you have Python installed:
python3 -m http.server 8090
Then open http://localhost:8090/index.html in your browser.
Aussom-Script represents HTML elements as objects. Each object wraps a real DOM element and exposes methods to manipulate it:
div = new Div();
div.setAttr('class', 'my-class');
div.add(new Text('Hello World'));
Win.getById('app').add(div);
Every aussom-bs class extends one of the built-in HTML node classes. The class constructor sets up the Bootstrap CSS classes and attributes for you:
// This one line replaces several manual setAttr() calls:
alert = new BsAlert(bsVariant.success, 'It worked!');
Win.getById('app').add(alert);
aussom-bs defines enums for parameters that have a fixed set of valid values:
| Enum | Values |
|---|---|
bsSize |
sm, md, lg, xl, xxl |
bsContainerSize |
sm, md, lg, xl, xxl, fluid |
bsVariant |
primary, secondary, success, danger, warning, info, light, dark |
bsSpinnerType |
border, grow |
bsNavStyle |
tabs, pills |
bsCardImgPos |
top, bottom, overlay |
bsDropDirection |
dropdown, dropup, dropend, dropstart |
bsNavbarTheme |
light, dark |
bsNavbarExpand |
sm, md, lg, xl, xxl |
bsToastPos |
topStart, topCenter, topEnd, middleStart, middleCenter, middleEnd, bottomStart, bottomCenter, bottomEnd |
bsButtonType |
button, submit, reset |
Pass enum values directly to constructors:
btn = new BsButton(bsVariant.danger, 'Delete', true);
Wraps page content with a centered, responsive container.
// Fixed-width container
cont = new BsContainer();
// Fluid (full-width) container
fluidCont = new BsContainer(bsContainerSize.fluid);
// Breakpoint-limited container
mdCont = new BsContainer(bsContainerSize.md);
Build responsive grid layouts using rows and columns.
row = new BsRow();
// 12-column grid: three equal columns
col1 = new BsCol('4');
col2 = new BsCol('4');
col3 = new BsCol('4');
// Responsive column (collapses below lg breakpoint)
responsiveCol = new BsCol('6', bsSize.lg);
col1.add(new Text('Column 1 content'));
row.add(col1);
row.add(col2);
row.add(col3);
cont.add(row);
Large decorative headings for hero sections.
new BsDisplay('1', 'Welcome to My App');
new BsDisplay('4', 'Subheading');
A paragraph that stands out visually from normal body text.
new BsLead('This lead paragraph introduces the main content.');
A styled quotation block with an optional attribution line.
new BsBlockquote('Ask not what your country can do for you.', 'John F. Kennedy');
// Fluid (responsive) image
new BsImage('img/photo.jpg', 'A photo', 'fluid');
// Thumbnail style
new BsImage('img/thumb.jpg', 'Thumbnail', 'thumbnail');
// Figure with caption
new BsFigure('img/chart.png', 'Bar chart', 'Q3 revenue by region.');
tbl = new BsTable(null, true, true); // striped, hover enabled
thead = new BsTableHead(bsVariant.dark);
headerRow = new BsTableRow();
headerRow.add(new BsTableHeadCell('Name'));
headerRow.add(new BsTableHeadCell('Role'));
thead.add(headerRow);
tbody = new BsTableBody();
row1 = new BsTableRow();
row1.add(new BsTableCell('Alice'));
row1.add(new BsTableCell('Admin', bsVariant.success));
tbody.add(row1);
tbl.add(thead);
tbl.add(tbody);
// Basic alert
new BsAlert(bsVariant.info, 'Here is some helpful information.');
// Dismissible alert
new BsAlert(bsVariant.warning, 'Check your settings.', true);
// Standard badge
new BsBadge(bsVariant.primary, '5');
// Pill badge
new BsBadge(bsVariant.success, '99+', true);
// Primary solid button
new BsButton(bsVariant.primary, 'Save');
// Outline danger button
new BsButton(bsVariant.danger, 'Delete', true);
// Large disabled button
new BsButton(bsVariant.secondary, 'Unavailable', false, bsSize.lg, true);
// Submit button
new BsButton(bsVariant.primary, 'Submit', false, null, false, bsButtonType.submit);
card = new BsCard();
card.add(new BsCardHeader('Featured'));
body = new BsCardBody();
body.add(new BsCardTitle('Card Title'));
body.add(new BsCardSubtitle('Card Subtitle'));
body.add(new BsCardText('Card body text goes here.'));
body.add(new BsButton(bsVariant.primary, 'Action'));
card.add(body);
card.add(new BsCardFooter('Last updated 3 mins ago'));
lg = new BsListGroup();
lg.add(new BsListGroupItem('Item one'));
lg.add(new BsListGroupItem('Active item', null, true));
lg.add(new BsListGroupItem('Success item', bsVariant.success));
lg.add(new BsListGroupItem('Disabled item', null, false, true));
acc = new BsAccordion('myAccordion');
acc.addItem('Question One', 'Answer to question one.', true);
acc.addItem('Question Two', 'Answer to question two.');
// Always-open: multiple sections can be open at the same time
acc2 = new BsAccordion('myAccordion2', true);
acc2.addItem('Section A', 'Content A.');
acc2.addItem('Section B', 'Content B.');
dd = new BsDropdown();
dd.add(new BsDropdownToggle('Options', bsVariant.secondary));
menu = new BsDropdownMenu();
menu.add(new BsDropdownItem('Edit', '#'));
menu.add(new BsDropdownDivider());
menu.add(new BsDropdownHeader('Danger Zone'));
menu.add(new BsDropdownItem('Delete', '#'));
dd.add(menu);
Build the modal structure and add it to the page. A trigger button opens it.
// Trigger button
btn = new BsButton(bsVariant.primary, 'Open Modal');
btn.setAttr('data-bs-toggle', 'modal');
btn.setAttr('data-bs-target', '#myModal');
// Modal
modal = new BsModal('myModal');
dialog = new BsModalDialog(false, true); // centered
content = new BsModalContent();
header = new BsModalHeader('Confirm Action');
content.add(header);
body = new BsModalBody();
body.add(new P('Are you sure you want to proceed?'));
content.add(body);
footer = new BsModalFooter();
cancelBtn = new BsButton(bsVariant.secondary, 'Cancel');
cancelBtn.setAttr('data-bs-dismiss', 'modal');
footer.add(cancelBtn);
footer.add(new BsButton(bsVariant.primary, 'Confirm'));
content.add(footer);
dialog.add(content);
modal.add(dialog);
page.add(btn);
page.add(modal);
container = new BsToastContainer(bsToastPos.bottomEnd);
toast = new BsToast('myToast');
toast.add(new BsToastHeader('Notification', 'Just now'));
toast.add(new BsToastBody('Your file has been saved.'));
container.add(toast);
page.add(container);
// Show the toast (call this after the DOM is ready):
// new bootstrap.Toast(document.getElementById('myToast')).show();
navbar = new BsNavbar(bsNavbarTheme.light, bsVariant.light, bsNavbarExpand.lg);
cont = new BsContainer(bsContainerSize.fluid);
brand = new BsNavbarBrand('My App', '/');
toggler = new BsNavbarToggler('mainNav');
collapse = new BsNavbarCollapse('mainNav');
navList = new BsNavbarNav();
item1 = new Span();
item1.setAttr('class', 'nav-item');
item1.add(new BsNavLink('Home', '/', true));
navList.add(item1);
item2 = new Span();
item2.setAttr('class', 'nav-item');
item2.add(new BsNavLink('About', '/about'));
navList.add(item2);
collapse.add(navList);
cont.add(brand);
cont.add(toggler);
cont.add(collapse);
navbar.add(cont);
pg = new BsPagination();
prev = new BsPageItem(false, true); // disabled previous
prev.add(new BsPageLink('Previous', '#'));
pg.addItem(prev);
p1 = new BsPageItem(true); // active page 1
p1.add(new BsPageLink('1', '#'));
pg.addItem(p1);
p2 = new BsPageItem();
p2.add(new BsPageLink('2', '#'));
pg.addItem(p2);
next = new BsPageItem();
next.add(new BsPageLink('Next', '#'));
pg.addItem(next);
p = new BsProgress();
p.add(new BsProgressBar(60, 0, 100, '60%', bsVariant.info));
// Striped and animated
p2 = new BsProgress();
p2.add(new BsProgressBar(80, 0, 100, null, bsVariant.success, true, true));
// Border spinner (default)
new BsSpinner(bsSpinnerType.border, bsVariant.primary);
// Grow spinner, small size
new BsSpinner(bsSpinnerType.grow, bsVariant.danger, bsSize.sm);
bc = new BsBreadcrumb();
bc.addItem(new BsBreadcrumbItem('Home', '/'));
bc.addItem(new BsBreadcrumbItem('Products', '/products'));
bc.addItem(new BsBreadcrumbItem('Widget', null, true)); // active, no link
BsForm.addField() handles the label, field, and optional help text in one call:
form = new BsForm('/submit', 'post');
form.addField('Full Name',
new BsTextField('fullName', null, 'Jane Doe'),
'Enter your legal first and last name.');
form.addField('Email',
new BsEmailField('email'));
form.addField('Password',
new BsPasswordField('pwd'));
form.addField('Age',
new BsNumberField('age', null, 0, 120));
form.addField('Bio',
new BsTextarea('bio', 4));
sel = new BsSelect('country');
sel.addOption('United States', 'us');
sel.addOption('Canada', 'ca');
form.addField('Country', sel);
// Submit button
submitRow = new BsFormRow();
submitRow.add(new BsButton(bsVariant.primary, 'Submit', false, null, false, bsButtonType.submit));
form.add(submitRow);
These are self-contained components. Add them directly or inside a BsFormRow.
row = new BsFormRow();
row.add(new BsCheckbox('agree', 'I agree to the terms', false));
row.add(new BsCheckbox('newsletter', 'Subscribe', true));
form.add(row);
radioRow = new BsFormRow();
radioRow.add(new BsRadio('optA', 'choice', 'Option A', true));
radioRow.add(new BsRadio('optB', 'choice', 'Option B'));
form.add(radioRow);
switchRow = new BsFormRow();
switchRow.add(new BsSwitch('darkMode', 'Dark mode'));
form.add(switchRow);
form.addField('Volume', new BsRange('volume', 0, 100, 5, '50'));
form.addField('Avatar', new BsFileInput('avatar'));
// Multiple file selection
form.addField('Photos', new BsFileInput('photos', true));
Attach text addons before or after an input:
// Prefix
ig = new BsInputGroup();
ig.add(new BsInputGroupText('@'));
ig.add(new BsTextField('username', null, 'Username'));
// Suffix
ig2 = new BsInputGroup();
ig2.add(new BsTextField('amount', null, '0.00'));
ig2.add(new BsInputGroupText('USD'));
// Size variant
ig3 = new BsInputGroup(bsSize.lg);
ig3.add(new BsInputGroupText('$'));
ig3.add(new BsTextField('price'));
The wrapped input must have both an id and a placeholder attribute set.
field = new BsTextField('floatEmail', null, 'name@example.com');
field.setId('floatEmail');
fl = new BsFloatingLabel('Email address', field);
Run build.sh from the project root to generate the AussomDoc API reference into the
docs/ directory:
./build.sh
This runs:
aussom -d -o docs aus/aussomBs.aus
The generated file is placed at docs/aussomBs.md.
| Component | Class | Key Params |
|---|---|---|
| Container | BsContainer |
Size (bsContainerSize) |
| Grid row | BsRow |
Children (list) |
| Grid column | BsCol |
NumberOfCols, Size (bsSize) |
| Display heading | BsDisplay |
Level (1-6), Text |
| Lead paragraph | BsLead |
Text |
| Blockquote | BsBlockquote |
Text, Footer |
| Responsive image | BsImage |
Src, Alt, Style |
| Figure | BsFigure |
Src, Alt, Caption |
| Table | BsTable |
Variant, Striped, Hover, Bordered, Small |
| Alert | BsAlert |
Variant (bsVariant), Message, Dismissible |
| Badge | BsBadge |
Variant (bsVariant), Text, Pill |
| Breadcrumb | BsBreadcrumb |
use addItem() |
| Breadcrumb item | BsBreadcrumbItem |
Text, Href, Active |
| Button | BsButton |
Variant, Text, Outline, Size, Disabled, Type |
| Button group | BsButtonGroup |
Vertical, Size |
| Card | BsCard |
add BsCardHeader/Body/Footer |
| List group | BsListGroup |
Flush, Horizontal |
| List group item | BsListGroupItem |
Text, Variant, Active, Disabled |
| Nav | BsNav |
Style (bsNavStyle), Fill, Justified |
| Tab pane | BsTabPane |
Id, Active |
| Navbar | BsNavbar |
Theme, BgVariant, Expand |
| Pagination | BsPagination |
Size; use addItem() |
| Progress | BsProgress |
add BsProgressBar |
| Progress bar | BsProgressBar |
Value, Min, Max, Label, Variant, Striped, Animated |
| Spinner | BsSpinner |
Type (bsSpinnerType), Variant, Size |
| Accordion | BsAccordion |
Id, AlwaysOpen; use addItem() |
| Dropdown | BsDropdown |
Direction (bsDropDirection) |
| Modal | BsModal |
Id, Static, Size |
| Toast | BsToast |
Id, AutoHide, Delay |
| Toast container | BsToastContainer |
Position (bsToastPos) |
| Form | BsForm |
Action, Method; use addField() |
| Text field | BsTextField |
Id, Value, Placeholder |
| Email field | BsEmailField |
Id, Value, Placeholder |
| Password field | BsPasswordField |
Id, Value, Placeholder |
| Number field | BsNumberField |
Id, Value, Min, Max, Step |
| Textarea | BsTextarea |
Id, Rows, Value |
| Select | BsSelect |
Id, Size, Multiple |
| Checkbox | BsCheckbox |
Id, LabelText, Checked, Disabled |
| Radio button | BsRadio |
Id, Name, LabelText, Checked, Disabled |
| Switch | BsSwitch |
Id, LabelText, Checked |
| Range slider | BsRange |
Id, Min, Max, Step, Value |
| File input | BsFileInput |
Id, Multiple, Accept |
| Input group | BsInputGroup |
Size |
| Input group text | BsInputGroupText |
Text |
| Floating label | BsFloatingLabel |
LabelText, InputField |
