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 |
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)
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