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