Guidance last updated:
Jun 6, 2023
A reimplementation of the 12-column Bootstrap 3 grid system.
This means you can use the Bootstrap 3 grid documentation to build grids.
Use a .bc-grid
wrapper class for these otherwise unprefixed BS3 grid classes.
Rows can be placed anywhere provided they’re inside a .bc-grid
container.
☞ Grid test file.
Grid customizations
- Added
xl
breakpoint ($bc-media-xl
)
- “
*-xl-*
” breakpoint classes
.container-fluid__container
: a fixed-width ‘inner’ container for the
fluid container.
Guidance last updated:
Jun 6, 2023
The common layouts we use in products.
A layout will apply to a viewport width ≥ its defined breakpoint and < the upper breakpoint(s).
This because the Grid system is mobile-first, and the bc-media
mixin uses min-width
instead of max-width
.
Wide page layout
12 grid columns for full container-width wide content.
Use for
- Big tables
- Wide graphs
- Hero or banner content

☞ Wide content layout test file.
Basic page layout
Page without sidebar.
Use for pages that:
The main content has:
- 8 grid columns at width ≥
lg
- 10 grid columns at width <
lg
and ≥ md
.

☞ Basic page layout test file.
Supporting sidebar layout
8 grid columns for the main content, and 4 columns for the sidebar.
Use for pages that have main content and a related, secondary <aside>
or sidebar.
At viewport width ≥ xm
and < sm
, the layout uses all 12 grid columns (full width), and so the sidebar appears below the main content.

☞ Supporting sidebar layout test file.
Important sidebar layout
8 grid columns for the main content, and 4 grid columns for the sidebar. The sidebar should contain information that is important.
Use for pages that have main content but a sidebar with information that comes first in the markup order.
Don’t use for pages that have long sidebar information. This will push the main content further down at screen width ≥ xm
and ≤ sm
.
At viewport width ≥ xm
and < sm
, the layout use 12 grid columns (full width) and the sidebar appears above the main content.

☞ Important sidebar layout test file.
Page with navigation
8 grid columns for the main content, and 3 grid columns for the side navigation.
Use for
- Pages with vertical navigation on the left
- Pages with data filters on the left.
Don’t use for pages that have main content and a sidebar with information on the left.

☞ Page with navigation layout test file.
Card grid
Cards arranged in a grid.
Each card has:
- 3 grid columns at width ≥
lg
- 4 grid columns at width <
lg
and ≥ md
- 6 grid columns at width <
md
and ≥ sm
- 12 grid columns at width <
sm
.

☞ Card grid layout test file.
Guidance last updated:
Jun 6, 2023
A wizard that guides the user through a complex setup process to create objects. Setup guides can be used multiple times to create new objects.
Ideal for setting up engagements and objects that require multiple steps to
complete.
All pages follow the basic page layout.
8
grid columns at width ≥lg
, 10
grid columns at width <lg
and ≥md
.
Setup layouts maintain the standard header and footer to allow the user to leave
the workflow and re-engage at a later time.
All setup flows must have a start, summary, and end page.
Containers and wrappers
Containers and wrappers |
Usage |
bc-setup-layout |
Contains the entire content on the page. |
bc-setup-layout__header |
Contains the heading content. |
bc-setup-layout__header__action |
Wraps and aligns the title and actions. Use for setup pages. |
bc-setup-layout__header__action__actions |
Right aligns the actions. Use for ‘Save and complete later’ action. |
bc-setup-layout__main |
Contains the main (body) content. |
bc-setup-layout__footer |
Contains the ‘next’ and ‘previous’ actions in the footer. |
Guidance on styles
Use:
bc-setup-layout__header__title
: to remove the top and bottom margins for the page
title.
bc-setup-layout__header__heading
: to reduce top and bottom margins for
headings nested in the header container.
bc-setup-layout__image
: to make an image responsive to its grid layout.
bc-setup-layout__lead
: to style text following a header. Makes body text
larger and grey.
Guidance on variants
Use:
bc-setup-layout--start-end
: with bc-setup-layout
for start and end pages to
vertically align content.
bc-setup-layout__footer--single
: with bc-setup-layout__footer
for single
actions within setup page footers. Keeps the primary action on the left of the
page.
Introduction/Start page
Introduces the user to what they are setting up, what to use it for, what they
will need, and an estimate of how long it will take to complete.
Be sure to identify what it is used for and what they need to start with bullet
points.
Use for
- Start of workflow
- Setup introduction
- Preparing the user for what is to come

☞ Setup start test file.
Card selection page
Allows user input with large, multi/single select cards. These cards can either
be radio or checkboxes, but should offer larger affordance and rich content for
usability.
See Forms > Control input > –card variant for
how to implement card selection.
Use for
- Presenting options for the user to choose from.

☞ Setup card selection test file.
Form page
Allows user input with form inputs. These can be labeled semantically with
aria-labelledby
attribute by the title and description, or with a standard
visible <label>
.
See Forms > Labels for how to implement form labels.
Use for

☞ Setup form test file.
Summary page
Allow users to check the final details. Use this page as confirmation before
users submit the recorded information. This provides users with an overview of
their actions.
Use for
- Summarizing entered details
- Accepting terms and conditions

☞ Setup summary test file.
Finish/confirmation page
This uses the start page layout. It is the final confirmation page at the end of
the workflow.
Include the following points where possible:
- Summarize what was done
- Identify the next steps
- Suggest what to do next
- How to get help if there is an issue
Use for
- End of workflow
- Confirmation of completion

☞ Setup finish test file.
Guidance last updated:
Jun 6, 2023
Introductory, welcoming layouts that introduce the user to the app or new feature.
Onboarding layouts is a one-time experience and is recommended for introducing
and familiarizing a new user to Bugcrowd’s products and services.
Avoid complex steps with a maximum of:
- 3 form inputs per step
- 2 form input types in a single step
- 5 steps (not including start and end pages) in a single onboarding experience.
The header is simplified, and the footer is removed to minimize distraction.
Use this layout for flows such as:
- onboarding
- introductions
- account setup
- splash pages
- or feature presentations.
All onboarding flows must have a start and end page.
Page layout
All pages follow the basic page layout.
8 grid columns at width ≥lg
, 10 grid columns at width <lg
and ≥md
.
Buttons
The primary action should always come first and should be the action that
progresses the workflow.
All buttons are center aligned with the following column widths:
Breakpoint |
Columns |
≥sm |
10 |
≥md |
8 |
≥lg |
6 |
≥xl |
4 |
Forms
Form inputs are purposely left-aligned for scanability. Maintain consistency
between the form fields and buttons by using the same grid layout.
Containers and wrappers
Containers and wrappers |
Usage |
bc-setup-layout bc-setup-layout--onboarding |
Contains and center aligns the entire content in the page. |
bc-setup-layout__header |
Contains the heading content. |
bc-setup-layout__main |
Contains the main (body) content. |
bc-setup-layout__footer |
Contains the ‘next’ and ‘previous’ actions in the footer. |
Guidance on styles
Use:
bc-setup-layout__header__heading
: to reduce the top and bottom margins for
headings nested in the header container.
bc-setup-layout__image
: to make an image responsive to its grid layout.
bc-setup-layout__lead
: to style text following a header. Makes body text
larger and grey.
Guidance on variants
Use:
bc-setup-layout--start-end
: with bc-setup-layout
for start and end pages to
vertically align content.
Introduction/Welcome page
Introduces the user to who we are, what they are going to do, why they are doing
it, and an estimate of how long it will take to complete.
Use for
- Start of workflow
- Splash pages

☞ Onboarding start test file.
Card selection page
Allows user input with large, multi/single select cards. These cards can either
be radio or checkboxes, but should offer larger affordance and rich content for
usability.
See Forms > Control input > --card
variant for
how to implement card selection.
Use for
- Presenting options for the user to choose from.

☞ Onboarding card selection test file.
Form page
Allows user input with form inputs. These can be labeled semantically with
aria-labelledby
attribute by the title and description, or with a standard
visible <label>
.
See Forms > Labels for how to implement form labels.
Use for
- Requesting user text input

☞ Onboarding form test file.
Finish/Thank you page
Similar to the start page layout, but with a completed progress bar. This page
confirms the completion of the onboarding experience.
Use for

☞ Onboarding finish test file.