Skip to content

feat(bootstrap4): add media-link for Media object#620

Merged
wesleyboar merged 2 commits into
mainfrom
feat/bootstrap4-media-link
Apr 1, 2026
Merged

feat(bootstrap4): add media-link for Media object#620
wesleyboar merged 2 commits into
mainfrom
feat/bootstrap4-media-link

Conversation

@wesleyboar

@wesleyboar wesleyboar commented Apr 1, 2026

Copy link
Copy Markdown
Member

Overview

Adds a Bootstrap 4 extension for the media object, .media-link modifier which aligns thumbnail and body.

Demo has variant markup for Bootstrap and TACC.

Related

Changes

  • added stylesheet
  • added demo

Testing

  1. Run npm run build:css and confirm dist/core-styles.bootstrap4.css includes .media-link.
  2. Run npm start (or npm run build:demo) and open the Bootstrap 3. Media pattern; confirm examples match intended layout.

UI

boostrap media extended by tacc

Add .media.media-link (gap + vertical centering), import in core-styles.bootstrap4.css, and Fractal pattern with readme and demo layout.

Made-with: Cursor
@qodo-code-review

Copy link
Copy Markdown

Review Summary by Qodo

Add Bootstrap 4 media-link modifier with pattern library documentation

✨ Enhancement

Grey Divider

Walkthroughs

Description
• Add .media-link modifier for Bootstrap 4 Media object component
• Implements flex gap and vertical centering for link-style media layouts
• Includes Fractal pattern with HTML5 and HTML4 markup examples
• Supports both <a> and <p> container variants for different use cases
Diagram
flowchart LR
  A["Source CSS<br/>media.css"] -- "import" --> B["core-styles.bootstrap4.css"]
  B -- "build" --> C["dist/core-styles.bootstrap4.css"]
  D["Fractal Pattern<br/>media.hbs"] -- "demo styles" --> E["dist/bootstrap4/components/media/demo.css"]
  F["Pattern Config<br/>config.yml + readme.md"] --> D
Loading

Grey Divider

File Changes

1. src/lib/_imports/bootstrap4/components/media.css ✨ Enhancement +4/-0

New media-link CSS with gap and alignment

src/lib/_imports/bootstrap4/components/media.css


2. src/lib/_imports/bootstrap4/components/media/demo.css 📝 Documentation +14/-0

Pattern library demo styles for media examples

src/lib/_imports/bootstrap4/components/media/demo.css


3. src/lib/_imports/bootstrap4/components/media/media.hbs 📝 Documentation +41/-0

Fractal pattern template with markup examples

src/lib/_imports/bootstrap4/components/media/media.hbs


View more (6)
4. src/lib/_imports/bootstrap4/components/media/config.yml 📝 Documentation +3/-0

Pattern configuration with Bootstrap context

src/lib/_imports/bootstrap4/components/media/config.yml


5. src/lib/_imports/bootstrap4/components/media/readme.md 📝 Documentation +3/-0

Pattern documentation linking to Bootstrap reference

src/lib/_imports/bootstrap4/components/media/readme.md


6. src/lib/_imports/core-styles.bootstrap4.css ⚙️ Configuration changes +1/-0

Import new media component stylesheet

src/lib/_imports/core-styles.bootstrap4.css


7. dist/bootstrap4/components/media.css Dependencies +1/-0

Compiled minified media-link styles

dist/bootstrap4/components/media.css


8. dist/core-styles.bootstrap4.css Dependencies +1/-1

Updated compiled bundle with media-link

dist/core-styles.bootstrap4.css


9. dist/bootstrap4/components/media/demo.css Dependencies +1/-0

Compiled minified demo styles

dist/bootstrap4/components/media/demo.css


Grey Divider

Qodo Logo

@qodo-code-review

Copy link
Copy Markdown

Code Review by Qodo

Grey Divider

Looking for bugs?

Check back in a few minutes. An AI review agent is analyzing this pull request.

Grey Divider

Qodo Logo

@wesleyboar
wesleyboar merged commit 0f45027 into main Apr 1, 2026
@wesleyboar
wesleyboar deleted the feat/bootstrap4-media-link branch April 1, 2026 19:51
wesleyboar added a commit that referenced this pull request Apr 1, 2026
> [!IMPORTANT]
> This is the missing commit from #620.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant