Bootstrap for Line-of-Business Apps

Bootstrap's job in an enterprise app is not to be beautiful — it's to make forty screens built by six developers over eight years look like one application. The winning move is boring: learn the standard components, use them exactly as documented, and resist custom CSS until a real requirement forces it. Consistency over creativity — a caseworker who uses this app all day benefits from every screen behaving identically.

Grid and forms: the 90% case

The grid — .row containing .col-md-6-style columns on a 12-unit scale — is how every screen is laid out: filters above, results below, label/field pairs in columns. Grok the breakpoints (sm/md/lg/xl) once: an LOB form is typically two columns on a desktop (col-md-6) and stacks to one column on anything narrow, automatically.

Forms are Razor + Bootstrap classes cooperating:

<div class="mb-3">
    <label asp-for="Name" class="form-label"></label>
    <input asp-for="Name" class="form-control" />
    <span asp-validation-for="Name" class="text-danger"></span>
</div>

The baseline today is Bootstrap 5 (mb-3, form-label, is-invalid; no jQuery dependency of its own — your jQuery is there for validation and Kendo, not for Bootstrap). Still check the project's version before you Google: copy-pasting a snippet from another major version's docs "works" but styles subtly wrong, because class names shifted between releases (legacy apps on Bootstrap 3/4 use form-group, has-error, control-label).

Modals, tables, and validation styling

Modals are the LOB workhorse for confirmations and quick edits without leaving the grid. Two field-tested rules: load modal content via AJAX partials into one reusable modal shell (rather than embedding twenty hidden modals per page), and re-run $.validator.unobtrusive.parse() on any form you inject — Lesson 2's rule biting in its most common location.

Tables: table table-striped table-hover covers the standard results grid; wrap it in .table-responsive so wide tables scroll horizontally on small screens instead of shattering the layout. Once a grid needs server paging, sorting, filtering, and Excel export, that's Kendo UI's job (later module) — don't hand-build it.

Validation styling is where Bootstrap meets the validation stack: unobtrusive validation toggles classes on failing inputs, and your CSS/markup must map those to Bootstrap's error look (is-invalid). Most mature codebases have a small adapter script or CSS mapping input-validation-error → the Bootstrap class; find it before writing your own.

The discipline

Before styling anything by hand, ask in order: is there a Bootstrap component for this? Is there a utility class (text-danger, d-none, mt-3)? Is there an existing pattern in this codebase? Custom CSS is the last resort, and it goes in the shared stylesheet with a comment — not in a style="" attribute a teammate will never find.