BA2019 Bootstrap UI

Navbars and Form Elements

Navbars house a group of buttons, dropdowns, and/or input forms. Alignment can be handled via boostrap classes.

Also note that its impossible to globally style a navbar so it works in all instances. By default elements have 10px right and bottom margin. Flex-grow and other breakpoints should be handled with Bootstrap Spacing Utilities.

It is unlikely you as an editor will need to add a navbar to a page, so this example is purely for QA and provides a code block for dev team to grab.

Dropdowns

Let’s start with a solo Bootstrap Dropdown Button

  • This can be used as a standalone element or in a navbar or flexbox. TBD if the standalone dropdown will look different.
  • The color of the dropdown button is handled with normal button variations (primary, secondary etc).
  • The dropdown menu will change to a scrollable element after x px.

Usage Notes: For now this element must be entered using the custom HTML block. Simple copy and paste HTML above or directly from Bootstrap It is being considered as a future gutenberg block.

Buttons

See Bootstrap’s Button component to see all available options and code examples. To make a link work like a button, simply add .btn .btn-primary to the anchor element.

Note that buttons come with ‘state‘, which we should consider styling as we get into more advanced form development.

(blue background added to showcase transparency)

The following buttons come with Bootstrap but we have not confirmed they will be used on BA2019 (and therefore have not been styled). Shown here for reference.

Usage Notes: For now this element must be entered using the custom HTML block. Simple copy and paste HTML above or directly from Bootstrap It is being considered as a future gutenberg block.

Striped Table

Issue Theme Mail Date
Nov/Dec 2017 Raw Materials/Crop Reports November 20
Jan/Feb 2018 The Business of Beer January 23
Mar/Apr 2018 The Culture of Craft/CBC Preview March 20
May/Jun 2018 2017 Industry Review May 23

Usage Notes: For now this element must be entered using the custom HTML block. Simple copy and paste HTML above or directly from Bootstrap It is being considered as a future gutenberg block.

Striped Table with Dark Header

Rank State Output
1. California $8.2 billion
2. Pennsylvania $6.3 billion
3. Texas $5.3 billion
4. New York $4.1 billion
5. Florida $3.6 billion

Usage Notes: For now this element must be entered using the custom HTML block. Simple copy and paste HTML above or directly from Bootstrap It is being considered as a future gutenberg block.

Unstriped Table

Issue Theme Mail Date
Nov/Dec 2017 Raw Materials/Crop Reports November 20
Jan/Feb 2018 The Business of Beer January 23

Usage Notes: For now this element must be entered using the custom HTML block. Simple copy and paste HTML above or directly from Bootstrap It is being considered as a future gutenberg block.

Striped Table with medium padding (.padded-lg) and logos (.text-with-logo)

Date Event Description
May
May
June
October
October
November

Accordion (Collapse)

Bootstrap Docs

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.


Loading Messages, Spinner Icons

Current we only have one default loading div. There is nothing special about the HTML, so your JS should target a custom ID as needed to show/hide. Add a class of initial-hide to hide by default.

Enter your message here

HTML