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.

Logging In

Validating

(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.

Large Button

Small Button

Block Level Button

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

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

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

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	Big Brew Day Each year on the first Saturday in May, thousands of homebrewers around the world unite to celebrate National Homebrew Day. Breweries can easily tie into Big Brew by creating yet another location participating in this national effort.
June	Homebrew Con The AHA conference is a fun, educational gathering designed to enhance homebrewers’ brewing skills and knowledge and increase homebrewing camaraderie. BA member breweries participate in events, seminars, sponsorship and advertising.
October	Great American Beer Festival® More than 100 media representatives attend America’s most prestigious beer festival and competition. The Craft Beer Program organizes a strategic craft beer and food pairing luncheon for media. Public relations efforts from the Craft Beer Program utilizes the festival as a powerful vehicle to help spread the word about craft brewers and the Brewers Association.
October	Great American Beer Festival Pro-Am Competition A crowd favorite at the GABF in which amateur homebrewers compete against each other with award-winning recipes they have produced in collaboration with a professional brewery.
November	Learn to Homebrew Day Each year on the first Saturday in November, homebrewers around the world are encouraged to invite non-brewing and brewing friends and family to celebrate Learn to Homebrew Day and brew a batch of beer together. Breweries can easily leverage the program to generate excitement for your brewery, and at the same time attract interest in the hobby of homebrewing.

Accordion (Collapse)

Bootstrap Docs

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.