Skip to end of metadata
Go to start of metadata
Page Layout and Grid

Purpose: Define the Bootstrap grid and show how to use it effectively for desktop layout and mobile responsiveness.

Category: Page layout, grid

Related jiras: UXI-369 - Data cannot be retrieved due to an unexpected error

Process Phase:

  • UXI JIRA Created (insert link above)
  • Component Specification draft complete
  • UXI code review complete
  • Reconcile with UIM and KRAD for differences
  • Conduct user testing if needed
  • Routed for review with Kuali UX Working Group and UX/KRAD Working Group
  • Reviewed with KAI
  • Rice JIRA Created (in KULRICE Project)
  • KRAD Implementation complete
  • Component released (insert rice release version below)

Version: 1.0



Bootstrap offers a really powerful responsive grid layout based on screen percentages. This component spec will detail how to use it effectively to easily create and maintain layouts. Relying on the Bootstrap grid, and avoiding custom styling will allow your layouts to work as expected in all browsers, and bring in robust responsiveness.

The license could not be verified: License Certificate has expired!

  • No labels

1 Comment

    • Edit Fiddle to include headers and footers once the test pure BS template is done.
      • Wanting to show not so much a tutorial on BS Grid but how we should be using it. Suggest how Kuali lays out the pages.
      • Explain how the grid is used in our screen, with a semi-transparent grid over it showing the grid usage.