Bootstrap Module 15

  Module 15 : Borders, Shadows, and Display Utilities in Bootscript. 

Primary official references: Bootstrap utilities docs for borders, shadows, and display. 

1 — Concepts 

Borders

Border utilities are single-class helpers that add or remove borders on any side: .border, .border-top, .border-0 (remove all), .border-start / .border-end (RTL-aware). They also provide color classes like .border-primary, width helpers (.border-1, .border-2, ...), and radius helpers (.rounded, .rounded-circle, .rounded-pill). These eliminate writing small CSS for common cases. 

Shadows

Bootstrap provides box-shadow utility classes: .shadow-none, .shadow-sm, .shadow, .shadow-lg. They map to SASS variables ($box-shadow, $box-shadow-sm, $box-shadow-lg) and can be toggled on/off. Shadows are disabled by default in Bootstrap’s core via a SASS flag $enable-shadows; the utilities still exist. The actual CSS behind these classes is box-shadow: <value>. Use them to create elevation and focus on elements like cards and modals. 

Display utilities

Display utilities control display property quickly: .d-none, .d-inline, .d-block, .d-flex, .d-inline-flex. They have responsive variations .d-md-none, .d-lg-flex, etc., enabling show/hide behavior per breakpoint. Use in responsive layouts to hide secondary content on small screens or switch between block/flex layouts. 

2 — methods 

 Below are patterns you’ll use and examples.

2.1 Card with border, radius, and shadow

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="card border-2 border-primary rounded-3 shadow p-3 mb-4" style="max-width: 420px;"> <img src="https://via.placeholder.com/400x150" class="card-img-top rounded-2" alt="demo image"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Use border and shadow utilities to create depth.</p> <a href="#" class="btn btn-primary">Action</a> </div> </div>

Notes: .border-2 adjusts width; .rounded-3 uses Bootstrap radius scale; .shadow gives regular elevation.

2.2 Responsive hero that hides a side image on small screens

<div class="d-flex align-items-center bg-light rounded-3 p-4 mb-3"> <div class="flex-fill"> <h1>Hero headline</h1> <p class="lead">Intro paragraph</p> </div> <div class="d-none d-md-block ms-3" style="width:220px;"> <img src="https://via.placeholder.com/220" class="img-fluid rounded shadow-sm" alt=""> </div> </div>

Notes: The image container is hidden on small screens with .d-none d-md-block.

2.3 Focused input with shadow and border color on focus (small custom CSS)

<style> .focus-enhanced:focus { outline: none; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); /* similar to .shadow but tuned to focus */ border-color: #0d6efd; /* primary */ } </style> <input class="form-control border rounded-2 focus-enhanced" placeholder="Focus me">

Why: Bootstrap utilities give quick styling, but custom focus styles improve accessibility and state clarity.

3 — SASS &

customization 

Bootstrap uses SASS variables for shadows and border radii. Key variables:

$box-shadow, $box-shadow-sm, $box-shadow-lg — shadow sizes. You can override them before importing Bootstrap to change global shadow definitions. 

$enable-shadows: true; — if you want shadow support in component styles.

Border variables like $border-width and radius scale ($border-radius, $border-radius-lg) can be tweaked.

Example: override shadow in custom.scss:

$box-shadow: 0 0.75rem 2rem rgba(0,0,0,.12); $box-shadow-sm: 0 0.25rem .6rem rgba(0,0,0,.06); @import "bootstrap";

Then rebuild your CSS with your SASS toolchain.

Utilities API: If you need custom utility classes (e.g., shadow-xl), use Bootstrap’s Utilities API in SASS to declare them so they integrate with the framework’s naming rules. The docs show how the shadow utility maps values. 

4 . A — Explore border utilities

Create an index.html with Bootstrap 5 CDN.

Create five <div>s stacked vertically:

.border

.border border-0 (remove)

.border-top border-3 border-primary

.border-start border-4 border-danger

.rounded-pill border-success p-2

Observe changes. Change .border-primary to .border-warning and note color change.

mix .border-0 with .rounded — what visually changes? (Answer: border removed, but radius still affects inner content or images that still have border radius.)

Understand side-specific borders, width scale, color classes, and radius interplay. Official docs: Borders utilities. 

B — Shadow scale and accessibility

Create 4 cards using .shadow-none, .shadow-sm, .shadow, .shadow-lg.

Open the page and toggle system color inversion or high-contrast mode (or use browser dev tools to simulate).

Measurement: Use devtools to inspect computed box-shadow values and compare offsets and alpha values.

Replace .shadow with a box-shadow that uses inset—see how the element looks flattened. Discussion: inset shadows are for inner depth; avoid them for elevation cues.

Key insight: Shadows communicate elevation—use small shadows for subtle separation and avoid heavy shadows on text-heavy elements. Docs: Shadows utilities and SASS variables. 

 C — Responsive display utilities

Build a two-column layout using d-flex:

<div class="d-flex flex-wrap"> <div class="p-2 flex-fill">Main content</div> <div class="p-2 d-none d-lg-block" style="width:280px;">Sidebar (hidden on small)</div> </div>

Resize the browser to mobile widths and observe the sidebar hide.

Experiment: Change .d-none d-lg-block to .d-block d-lg-none and reason about visibility patterns.

Discussion: This shows how to control visibility without JS, keeping the DOM intact but hiding elements via CSS. Good for responsive progressive enhancement. 

5 — Exercises 

Exercise 1

Create a badge that has no border on small devices but a 2px dark border on md and above.

Solution (snippet):

<span class="badge bg-light text-dark d-inline-block border-0 d-md-inline border-md border-2 border-dark">Badge</span>

Explanation: .border-0 applies everywhere; .d-md-inline ensures it’s inline from md up; but note Bootstrap doesn’t have border-md helpers by default — to strictly vary border presence by breakpoint you'd either use responsive display to swap elements or add a small custom CSS:

@media (min-width: 768px){ .badge-md-border { border:2px solid #000; } }

(This exercise highlights when to use built-in utilities vs a tiny custom rule.)

Exercise 2

 Add a hover effect to an image card that increases shadow on hover.

Solution:

<div class="card rounded overflow-hidden shadow-sm hover-shadow"> <img src="..." class="card-img-top"> </div> <style> .hover-shadow { transition: box-shadow .18s ease-in-out; } .hover-shadow:hover { box-shadow: 0 .75rem 2rem rgba(0,0,0,.15); } </style>

Explanation: Use native .shadow-* classes for defaults; CSS hover allows finer control.

6 . Accessibility & performance considerations

Contrast & shadows: Shadows do not replace contrast. Make sure borders and backgrounds meet contrast ratios for text readability.

Reduce motion: If you animate box-shadow on hover, respect prefers-reduced-motion.

Avoid heavy shadows on many elements: multiple large shadows can cost paint time — use selectively.

Display utilities & screen readers: Hiding via .d-none removes element visually but keeps it in DOM — screen readers may still see it depending on CSS; for fully hiding to assistive tech use aria-hidden="true" in addition to visual hiding when appropriate.

7 . Advanced research Box-shadow mechanics: The box-shadow property accepts multiple comma-separated shadows, and supports inset. Understanding how spread, blur, and offsets interact helps craft natural-looking elevation. (Docs show default SASS variables; in devtools to see effects). 

Utilities API: Bootstrap’s Utilities API lets you generate your own utility classes (for example, shadow-xl or breakpoint-specific border-weight classes) without cluttering HTML — recommended for design systems. See the Utilities API section in the borders/shadows docs. 

Responsive display best practices: Prefer display utilities for layout adjustments and small show/hide needs. For complex responsive swapping, conditionally render server-side or via JS if DOM size matters. 

8 . tips & checklist

Prefer utility classes over inline CSS for consistency and maintainability.

When needing a non-existent breakpoint variant for border widths, use SASS Utilities API to add the class globally rather than writing repeated custom CSS.

Audit your CSS bundle: if you override many variables, consider compiling a custom Bootstrap build to reduce unused CSS.

Test shadows on multiple devices — shadows may look very different on low-dpi vs high-dpi displays.

9 . Suggested 

    Bootstrap: Borders utilities (docs). 

Bootstrap: Shadows utilities (docs). 

Bootstrap: Display utilities (docs). 

Utilities for layout (flex/display) — pattern examples. 

10 . Build a responsive “product card grid” that:

Shows 4 columns on desktop, 2 on tablets, 1 on mobile (use d-flex + flex utilities or the grid).

Cards use .border, .rounded, and .shadow-sm by default, .shadow-lg on hover.

Product badges show/hide responsively (e.g., “Sale” badge appears only on lg).

Include accessible labels and keyboard focus styles.