Table of



Bootstrap's 5.3 References



v5.3 Cheatsheet
5.0 Utilities - Flex
5.0 Buttons Documentation

End of Bootstrap's 5.3 References



Form Builder



Builder Inspector
Builder Name: FormBuilder 
Builder Behaviors: None 
Arrangement: FormArrangement 
Arrangement Behaviors: None 
Default Composition: WrapperLabelComponentTrailingWrapperComposed 
Css Definitions: BootstrapFormControlCssDefinitions
Css Mixins: BootstrapHtmlCssDefinitions
If the action or method is set, then form open will be called automatically on the constructor.
This displays a text input.
We'll never share your email with anyone else.
Confirming that form-text did not apply to an unrelated div.
Radio buttons legend
If your checked option isn't showing up, it may not be within form tags.
Component Inspector
Component Name: Radio
Component Behaviors: None
Capsule: RadioCapsule
Attributes: CheckboxRadioSwitchAttribute
Css Mixins: BootstrapCheckDecorator, BootstrapRadioCssDefinitions, BootstrapFormControlCssDefinitions, BootstrapHtmlCssDefinitions

Component Inspector
Component Name: TextInput
Component Behaviors: None
Capsule: InputCapsule
Attributes: InputAttribute
Css Mixins: ExampleDefinitionsDecorator, BootstrapLargeFormsDecorator, BootstrapFormControlCssDefinitions, BootstrapHtmlCssDefinitions

Component Inspector
Component Name: Submit
Component Behaviors: None
Capsule: InputCapsule
Attributes: InputAttribute
Css Mixins: BootstrapFormControlCssDefinitions, BootstrapHtmlCssDefinitions

Add component examples in Form Builder

These following components are out of the builder using addComponent method. Generally, these won't be defined in the css definitions as they're not part of this. They will still use the arrangement, compositions, etc.

H1

    Unordered list
  • 1
  • 2


End of Form Builder



HTML Builder



Builder Inspector
Builder Name: HtmlBuilder 
Builder Behaviors: None 
Arrangement: HtmlArrangement 
Arrangement Behaviors: None 
Default Composition: ComponentTrailingComposed 
Css Definitions: BootstrapHtmlCssDefinitions
Css Mixins: None

heading example

heading example with HR turned off

heading example using a different sized heading
Example of a spacer: (Adding py-1 below)
aButton component
Example span

H1 example

H4 example

h1 HTML Tag

h1 as a Paragraph Using Bootstrap Styling

h2 has not been set up.
h3 has not been set up.

h4 HTML Tag

h4 as a Paragraph Using Bootstrap Styling

h5 has not been set up.
h6 HTML Tag

h6 as a Paragraph Using Bootstrap Styling

I believe this is intended to be like a list of names that can then be removed. Needs to be worked still.
Badge Component as a span
This is a video. It\s not embedded but rather loaded from server. Would need work.


End of HTML Builder



Table Builder



Builder Inspector
Builder Name: TableBuilder 
Builder Behaviors: None 
Arrangement: StripedTableArrangement 
Arrangement Behaviors: None 
Default Composition: ComponentComposed 
Css Definitions: BootstrapTableStripedCssDefinitions
Css Mixins: None
Example caption
Id Name
Id
123-abc
 John Doe
Id
456-def
 Jane Smith
Id
789-ghi
 Sammy Tucan

TableBuilder using Multiple Headers and Response data (check code)


(Nothing will be present at responsive sizes)
Kitty the Explorer
in love things of fortune


Create Date Order Number


End of Table Builder



Filter Builder



Routing Button 
Builder Inspector
Builder Name: FilterBuilder 
Builder Behaviors: None 
Arrangement: JustifyBetweenArrangement 
Arrangement Behaviors: None 
Default Composition: WrapperLabelComponentTrailingWrapperComposed 
Css Definitions: FilterBuilderCssDefinitions
Css Mixins: BootstrapFormControlCssDefinitions, BootstrapHtmlCssDefinitions
Filter Builder makes a header that can justify items to the right
These headings will most likely come standard for tables used in list presentations
This Example has a Routing button with a search filter and a title

Filter Title

Routing Button
Builder Inspector
Builder Name: FilterBuilder 
Builder Behaviors: None 
Arrangement: JustifyRightArrangement 
Arrangement Behaviors: None 
Default Composition: WrapperLabelComponentTrailingWrapperComposed 
Css Definitions: FilterBuilderCssDefinitions
Css Mixins: BootstrapFormControlCssDefinitions, BootstrapHtmlCssDefinitions
This Example has a Routing button with a search filter and a title with no search filter
This Example has filter buttons
truetest1
truetest2
truetest3
This Example has filter switches


End of Filter Builder



Radio Builder



Builder Inspector
Builder Name: FormBuilder 
Builder Behaviors: None 
Arrangement: FormArrangement 
Arrangement Behaviors: None 
Default Composition: WrapperLabelComponentTrailingWrapperComposed 
Css Definitions: BootstrapFormControlCssDefinitions
Css Mixins: BootstrapHtmlCssDefinitions
Builder Inspector
Builder Name: RadioBuilder 
Builder Behaviors: None 
Arrangement: RadioArrangement 
Arrangement Behaviors: None 
Default Composition: WrapperComponentLabelWrapperComposed 
Css Definitions: BootstrapRadioCssDefinitions
Css Mixins: None
Radio buttons Legend
If your checked option isn't showing up, it may not be within form tags.


End of Radio Builder



List Group Builder



List Group using Div/a tags

Item 1 Item 2 Item 3


End of List Group Builder



Breadcrumb Builder





End of Breadcrumb Builder



Card Builder



Hello Featured aka header

Title alias to H4 in card

Subitle alias to H6 in card

H1 in card body

Title as H4 in card body

Subtitle as H6 in card body
Div in card body

P in card body

Span in card body Anchor in card body
Span text in footer


Image top card builder

Title as H4 in card body

Subtitle as H6 in card body
Span text in footer


Two Column Card Builder - H4 outside of card body

Title as H4 in card body

Subtitle as H6 in card body

Right



No card body



No card body


Kitchen Sink of Columns
Second Header

H4 outside of card body

Title as H4 in card body

Subtitle as H6 in card body

Right

Second Row
    Right Unordered List inside Card Body
  • Item 1
  • Item 2
  • Item 3

This should be no margin or padding right on the edge

Text on the end with no margin or padding

    Left Unordered List outside of Card Body
  • Item 1
  • Item 2
  • Item 3
Fourth Row
Footer link


Card body arrangement to card rows arrangement
body div 1
body div 2
body div 3
New Row, no extra columns, Div 1. Because we did not explicitly say, "use card body" argument, it will have no margin.
new row 2, div 1
new row 2, column 2, div 2


Nesting new row inside of card body arrangement
body div 1
body div 2
body div 3
New Row, no extra columns, Div 1. Because we didn't close the card body arrangement, this row will nest.
new row 2, div 1
new row 2, column 2, div 2




End of Card Builder



Card Deck Builder



First Card in Deck
  • Item 1
  • Item 2
  • Item 3
Second card

NOTE: This is a non-responsive card because the col size is auto.

Card 1

Subtitle

Some content.

Card 2

Subtitle

Some content.

Card 3

Subtitle

Some content.

Card 4

Subtitle

Some content.

Card 5

Subtitle

Some content.

Card 6

Subtitle

Some content.

Card 7

Subtitle

Some content.

Card 8

Subtitle

Some content.

Card 9

Subtitle

Some content.

Card 10

Subtitle

Some content.

Card 11

Subtitle

Some content.

Card 12

Subtitle

Some content.

Card 13

Subtitle

Some content.

2 Cards and a button

Subtitle

Some content.

2 Cards and a button

Subtitle

Some content.



End of Card Deck Builder



Render Each HTML Builder



It's the exact same (as long as it doesn't fall out of sync...) as HTML Builder, but each component call will trigger the composition->render() method and return a string, instead of IComponent.


End of Render Each HTML Builder



Ellipsis Dropdown




Component Inspector
Component Name: Div
Component Behaviors: None
Capsule: DivCapsule
Attributes: HtmlAttribute
Css Mixins: BootstrapDropDownListCssDefinitions


End of Ellipsis Dropdown



Split Dropdown



Some Link

Edit

Edit 
Component Inspector
Component Name: A
Component Behaviors: Confirmation
Capsule: ACapsule
Attributes: LinkAttribute
Css Mixins: BootstrapDropDownListCssDefinitions


End of Split Dropdown



Stand-alone Components



Stand alone div
Component Inspector
Component Name: Div
Component Behaviors: None
Capsule: DivCapsule
Attributes: HtmlAttribute
Css Mixins: BootstrapFormControlCssDefinitions, BootstrapHtmlCssDefinitions

Component Inspector
Component Name: Email
Component Behaviors: None
Capsule: InputCapsule
Attributes: InputAttribute
Css Mixins:
Redeclared Stand alone div with bootstrap css definitions
Component Inspector
Component Name: Div
Component Behaviors: None
Capsule: DivCapsule
Attributes: HtmlAttribute
Css Mixins: BootstrapFormControlCssDefinitions, BootstrapHtmlCssDefinitions
Third redeclared stand alone div with no css
Component Inspector
Component Name: Div
Component Behaviors: None
Capsule: DivCapsule
Attributes: HtmlAttribute
Css Mixins:


End of Stand-alone Components



Bootstrap Display Flex Block Arrangement



Builder Inspector
Builder Name: FormBuilder 
Builder Behaviors: None 
Arrangement: DBlockArrangement 
Arrangement Behaviors: None 
Default Composition: WrapperLabelComponentTrailingWrapperComposed 
Css Definitions: BootstrapDisplayFlexBlockCssDefinitions
Css Mixins: BootstrapFormControlCssDefinitions, BootstrapHtmlCssDefinitions


End of Bootstrap Display Flex Block Arrangement



Bootstrap DFlex Justify Between Arrangement



Example 1

Example 2



End of Bootstrap DFlex Justify Between Arrangement



Bootstrap GridRow Arrangement



Grid Rows are responsive grids that form a table-like display. It can be used to create a table structure with a left-side heading.

Example 1

Header1
data 1
Header2
data 2
Header3
data 3
Header4
data 4
Header5
data 5


End of Bootstrap GridRow Arrangement



Icon Library



A list of Accepted Icons from the Icons Capsules and their uses

Name Icon Fontawesome Code Description
new fa fas fa-plus-circle This icon can be used to represent Additions (and increments), new files, documents or processes. Usually used in association with buttons or links.
edit fa fa-edit This icon is used to represent processes when making corrections/changes, editing files, documents or processes
delete fa fas fa-trash Used to represent Trash, deleting or removing files, documents or processes. Usually used to show non-permanent deleting of items.
email fa fas fa-envelope-o Used to represent mail processes including email references
password fa fas fa-unlock-alt Used to represent unlocked processes. Can be used to represent Password fields
search fa fas fa-search This icon is used on Search fields to represent the searching process. Sometimes also used to represent magnification.
stock fa far fa-object-ungroup Used for unlink or ungroup processes such as breaking the link between 2 contacts.
route fa fas fa-road This Icon represents a stretch of road. *I dont see a practical use of this icon in our framework*
list fa fas fa-list Used to present a list, generally an item list but can be used for any type of representation for lists.
close fa far fa-times-circle Used to represent cancelling or closing a process/item. May also be used to represent removal of an item from a list of items.
view fa far fas fa-eye This icon may be used to represent taking a closer look at something/ a process, or an item's details
stop fa fas fa-ban Usually used for Disable or cancel functionality. It may also be used to show unavailability of certain functionality
file fa fa-file May be used to represent Documents/Files.
calendar fa fa-calendar Used in Calendar/Date pickers to represent the ability to select or change a date.
calendar-o fa fa-calendar-o Used in Calendar/Date pickers to represent the ability to select or change a date.
pdf fa fa-file-pdf-o May be used to present the use or need for pdf files. May be used when a pdf upload is required or on a link which generates PDF files.
link fa fa-link Represent URLs or linking files/documents together
c-close fa fa-times-circle Used to represent cancelling or closing a process/item. May also be used to represent removal of an item from a list of items.
thumbs-up fa fas fa-thumbs-up Used to represent "Yes" responses or agreement. Can be used as a thumb's up representation for forums
thumbs-down fa fas fa-thumbs-down Used to represent "No" responses or disagreement. Can be used as a thumb's down representation for forums
glass fa fa-glass A wine glass icon can be used to represent drinks or or a restaurant/bar. This is not a filter icon.
warning fa fa-exclamation-triangle Icon used to represent warnings or something important.
spinner fa fa-solid fa-spinner spinner Generally used on loading screens in collaboration with css animations to show that data is being loaded in the background
pin fa fa-solid fa-map-pin Used to show a contextual navigation point, usually a geo-referenced or satellite specific point on a map. May also be used to represent specific addresses.
play fa fa-play-circle-o A 'play' icon used to represent starting a process, play multimedia
ellipsis fa fa-ellipsis-v A vertical ellipses icon generally used to represent a menu. Users generally understand that clicking on this icon would display menu/submenu items.
check fa fa-check-circle-o A check mark, used to represent successful submission of a form/field, or showing that the information on a field/form has validated successfully
img fa fa-image Used to represent the need/ability to add an image, or any image-specific processes. May be used as a placeholder for areas where an image may be uploaded and displayed.
caret-right fa fa-caret-right A plain right-facing arrow can be used to represent right-facing processes such as moving forward in a wizard or incrementing to the right/positively.
caret-up fa fa-caret-up A plain right-facing arrow can be used to represent left-facing processes such as moving forward in a wizard or incrementing to the left/negatively.
caret-down fa fa-caret-down A plain downward-facing arrow can be used to represent down-facing processes such as moving forward in a wizard or incrementing to the down/negatively.
percent fa fas fa-percent Percent icon, used to show percentage usage on inputs/outputs
open fa fa-folder-open Folder or Open Process icon. May be used to represent deeper directories or more information available by clicking an associated link
back fa fa-arrow-left An icon representing a Back arrow or backward navigation. May be used with links/buttons which links back to the previous page or a list page.
download fa fa-arrow-down Down Arrow icon. May be used to represent download links, or jumping to the end of a page.
upload fa fa-arrow-up Up Arrow icon. May be used to represent functionality to jump to the top of a page or any upward facing processes.
building fa fa-building An icon representing a building, possibly a commercial. May be used to represent commercial agencies/contacts/customers.
filter fa fa-filter An icon generally used to represent filters or filter processes. May be used when there is a need to show a user where they can refine results further.


End of Icon Library

Developer Stuff

Lists

Files, Teams, and Process Maps

IAM

Documents

Copyright Info