# Bootstrap

Bootstrap is a frontend toolkit and HTML, CSS, and JavaScript library for building fast, responsive websites.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Agents change the math on big bang migrations

DevFeed: [Agents change the math on big bang migrations](<https://devfeed.tech/articles/agents-change-the-math-on-big-bang-migrations-37614.md>)

Original publisher: [Read original article](<https://swizec.com/blog/agents-change-the-math-on-big-bang-migrations>)

Author: hi@swizec.com (Swizec Teller)

Published: 2026-08-01T00:00:00Z

Content type: opinion

Language: en

Sources: [Swizec Teller](<https://devfeed.tech/sources/swizec-teller.md>)

Topics: [migration](<https://devfeed.tech/topics/migration.md>), [Tailwind CSS](<https://devfeed.tech/topics/tailwind.md>), [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [Design system](<https://devfeed.tech/topics/design-system.md>), [Tech Debt](<https://devfeed.tech/topics/tech-debt.md>), [ui](<https://devfeed.tech/topics/ui.md>), [React](<https://devfeed.tech/topics/react.md>)

Tags: [agents](<https://devfeed.tech/tags/agents.md>), [bootstrap](<https://devfeed.tech/tags/bootstrap.md>), [design-system](<https://devfeed.tech/tags/design-system.md>), [migrations](<https://devfeed.tech/tags/migrations.md>), [react](<https://devfeed.tech/tags/react.md>), [tailwind](<https://devfeed.tech/tags/tailwind.md>), [tech-debt](<https://devfeed.tech/tags/tech-debt.md>)

### AI overview

An opinion article argues that AI agents may change how teams approach large software migrations. It describes a one-step migration of hundreds of pages from Bootstrap to Tailwind in a 22,000-line pull request, which the author says fixed 13 small bugs without materially disrupting the company.

### Source excerpt

I just did a team's worth of work in 5 days. Honestly I am shook to the core of my 20 YoE

## Zero-day Extensive NPM Package Compromise - Shai Hulud Supply Chain Attack

DevFeed: [Zero-day Extensive NPM Package Compromise - Shai Hulud Supply Chain Attack](<https://devfeed.tech/articles/zero-day-extensive-npm-package-compromise-shai-hulud-supply-chain-attack-7902.md>)

Original publisher: [Read original article](<https://snyk.io/blog/embedded-malicious-code-in-tinycolor-and-ngx-bootstrap-releases-on-npm/>)

Author: Brian Clark

Published: 2025-09-15T11:00:00Z

Content type: article

Language: en

Sources: [Blog RSS Feed | Snyk](<https://devfeed.tech/sources/blog-rss-feed-snyk.md>)

Topics: [Malware](<https://devfeed.tech/topics/malware.md>), [npm packages](<https://devfeed.tech/topics/npm-packages.md>), [Cybersecurity](<https://devfeed.tech/topics/cybersecurity.md>), [Angular](<https://devfeed.tech/topics/angular.md>), [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [GitHub Actions](<https://devfeed.tech/topics/github-actions.md>), [API keys](<https://devfeed.tech/topics/api-keys.md>), [GitHub](<https://devfeed.tech/topics/github.md>), [incident](<https://devfeed.tech/topics/incident.md>), [Security](<https://devfeed.tech/topics/security.md>), [data](<https://devfeed.tech/topics/data.md>), [Front end](<https://devfeed.tech/topics/frontend.md>)

Tags: [2025](<https://devfeed.tech/tags/2025.md>), [angular](<https://devfeed.tech/tags/angular.md>), [api-keys](<https://devfeed.tech/tags/api-keys.md>), [awareness](<https://devfeed.tech/tags/awareness.md>), [blog](<https://devfeed.tech/tags/blog.md>), [cybersecurity](<https://devfeed.tech/tags/cybersecurity.md>), [developer](<https://devfeed.tech/tags/developer.md>), [devrel](<https://devfeed.tech/tags/devrel.md>), [github](<https://devfeed.tech/tags/github.md>), [github-actions](<https://devfeed.tech/tags/github-actions.md>), [incident](<https://devfeed.tech/tags/incident.md>), [malware](<https://devfeed.tech/tags/malware.md>), [npm](<https://devfeed.tech/tags/npm.md>), [package-compromise](<https://devfeed.tech/tags/package-compromise.md>), [secrets](<https://devfeed.tech/tags/secrets.md>), [security](<https://devfeed.tech/tags/security.md>), [shai-hulud](<https://devfeed.tech/tags/shai-hulud.md>), [supply-chain](<https://devfeed.tech/tags/supply-chain.md>), [supply-chain-security](<https://devfeed.tech/tags/supply-chain-security.md>), [worm](<https://devfeed.tech/tags/worm.md>)

### AI overview

This article reports the Shai-Hulud supply chain attack, in which malicious versions of ngx-bootstrap and other npm packages embedded malware to harvest developer tokens, cloud credentials, API keys, and other secrets. The malware exfiltrated data through webhooks and public GitHub repositories, targeted CI/CD environments through GitHub Actions, and spread across hundreds of compromised packages. The article recommends treating affected systems as compromised, removing the packages, rotating secrets from a trusted machine, and investigating for lateral movement.

### Source excerpt

A supply chain attack hit the ngx-bootstrap npm package, embedding malware to steal developer credentials. See affected versions (e.g., 20.0.4-6, 19.0.3) and our playbook to contain the threat and rotate compromised secrets.

## Bootstrap 5.3.8

DevFeed: [Bootstrap 5.3.8](<https://devfeed.tech/articles/bootstrap-5-3-8-22300.md>)

Original publisher: [Read original article](<https://blog.getbootstrap.com/2025/08/25/bootstrap-5-3-8/>)

Author: Mark Otto

Published: 2025-08-25T15:22:00Z

Content type: release

Language: en

Sources: [Bootstrap.com](<https://devfeed.tech/sources/bootstrap-com.md>)

Topics: [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Documentation](<https://devfeed.tech/topics/documentation.md>), [changelog](<https://devfeed.tech/topics/changelog.md>)

Tags: [bug](<https://devfeed.tech/tags/bug.md>), [changelog](<https://devfeed.tech/tags/changelog.md>), [css](<https://devfeed.tech/tags/css.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [npm](<https://devfeed.tech/tags/npm.md>), [release](<https://devfeed.tech/tags/release.md>)

### AI overview

Bootstrap v5.3.8 is a patch release that reverts a dropdown focus change, updates CSS, and includes documentation, dependency, workflow, and development updates. It also removes Bootstrap Themes links and mentions from the documentation as the site is being sunset.

### Source excerpt

Bootstrap v5.3.8 is out with a reversion for a dropdown focus bug, some CSS updates, and several docs updates. The plan is for this to be the last patch release before v5.4.0 drops. To start, there's a brief update on Bootstrap Themes, with more communication to come. The team has decided to sunset https://themes.getbootstrap.com. As such, we've removed links to and mentions of the Themes site from our docs in this release to start. Stay tuned for more info.

## Bootstrap 5.3.7

DevFeed: [Bootstrap 5.3.7](<https://devfeed.tech/articles/bootstrap-5-3-7-22298.md>)

Original publisher: [Read original article](<https://blog.getbootstrap.com/2025/06/17/bootstrap-5-3-7/>)

Author: Mark Otto

Published: 2025-06-17T15:22:00Z

Content type: release

Language: en

Sources: [Bootstrap.com](<https://devfeed.tech/sources/bootstrap-com.md>)

Topics: [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [Documentation](<https://devfeed.tech/topics/documentation.md>), [Astro](<https://devfeed.tech/topics/astro.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Visual Studio Code](<https://devfeed.tech/topics/visual-studio-code.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [configuration](<https://devfeed.tech/tags/configuration.md>), [dependency](<https://devfeed.tech/tags/dependency.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [integrity](<https://devfeed.tech/tags/integrity.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [migration](<https://devfeed.tech/tags/migration.md>), [npm](<https://devfeed.tech/tags/npm.md>), [regression](<https://devfeed.tech/tags/regression.md>), [release](<https://devfeed.tech/tags/release.md>), [updates](<https://devfeed.tech/tags/updates.md>), [vscode](<https://devfeed.tech/tags/vscode.md>)

### AI overview

Bootstrap v5.3.7 is a patch release with fixes related to the migration to Astro, documentation, accessibility, JavaScript popovers and tooltips, Sass output, and recommended VSCode configuration. The release notes also mention a recent regression expected to be addressed in another patch release.

### Source excerpt

Bootstrap v5.3.7 was just released with some follow-up fixes from our migration to Astro, plus a handful of small fixes. We expect to have another patch release shortly due to at least one recent regression, so stay tuned for that. In the mean time, here are some highlights! Docs Fixed broken "View on GitHub" URLs Corrected HTML <head> content generated by the "Download examples" button Refined sanitizer documentation for clarity and completeness Improved accessibility in the "On this page" table of contents and section heading anchor links Relocated ads to the right sidebar to minimize content reflow Added a new section on the Download page for the Intelissence extension Clarified the "Via JavaScript" usage example for Accordion Collapse Made internal documentation improvements to support future maintenance (no visible user impact) Mention CDN integrity and crossorigin attributes in introduction page Enhance floating labels placeholder usage description Add example of showing dynamic range value with output Sass Consolidated multiple 'none' values in the box-shadow Sass mixin for cleaner output JavaScript Fixed popover and tooltip behavior with a trigger: "hover click" configuration Build tools Added recommended VSCode extensions and settings configuration to the repository Read the GitHub v5.3.7 changelog for a full list of changes (including a ton of documentation and dependency updates) in this release.

## Bootstrap Icons v1.12 and v1.13

DevFeed: [Bootstrap Icons v1.12 and v1.13](<https://devfeed.tech/articles/bootstrap-icons-v1-12-and-v1-13-22297.md>)

Original publisher: [Read original article](<https://blog.getbootstrap.com/2025/05/09/bootstrap-icons-1-12-1-13/>)

Author: Mark Otto

Published: 2025-05-09T00:01:00Z

Content type: release

Language: en

Sources: [Bootstrap.com](<https://devfeed.tech/sources/bootstrap-com.md>)

Topics: [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [releases](<https://devfeed.tech/topics/releases.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Vite](<https://devfeed.tech/topics/vite.md>), [Figma Community](<https://devfeed.tech/topics/figma-community.md>), [npm](<https://devfeed.tech/topics/npm.md>), [GitHub](<https://devfeed.tech/topics/github.md>)

Tags: [bug-fixes](<https://devfeed.tech/tags/bug-fixes.md>), [docs](<https://devfeed.tech/tags/docs.md>), [figma-community](<https://devfeed.tech/tags/figma-community.md>), [github](<https://devfeed.tech/tags/github.md>), [icons](<https://devfeed.tech/tags/icons.md>), [install](<https://devfeed.tech/tags/install.md>), [npm](<https://devfeed.tech/tags/npm.md>), [releases](<https://devfeed.tech/tags/releases.md>), [v1](<https://devfeed.tech/tags/v1.md>), [vite](<https://devfeed.tech/tags/vite.md>)

### AI overview

A recap of Bootstrap Icons v1.12.x and v1.13.x releases, covering new icons, documentation updates, Sass guidance for Vite, bug fixes, a search hotfix, installation options, and publication of the Figma file to Figma Community.

### Source excerpt

In the last few weeks, a handful of new Bootstrap Icons releases have gone out. Here's a recap of what's new in our v1.12.x and v1.13.x releases so far. v1.12 v1.12.0 added a single icon, mostly because people wouldn't stop asking for it haha, and v1.12.1 added a page to the docs for it. That was all for Bluesky. v1.13.0 and v1.13.1 New in v1.13.0 are several icons, some guidance around how to use Sass files with Vite, and a few little bug fixes to some fill rules. v1.13.1 was a hotfix to resolve an issue with search on our docs.

## Bootstrap 5.3.5

DevFeed: [Bootstrap 5.3.5](<https://devfeed.tech/articles/bootstrap-5-3-5-22295.md>)

Original publisher: [Read original article](<https://blog.getbootstrap.com/2025/04/04/bootstrap-5-3-5/>)

Author: Mark Otto

Published: 2025-04-04T15:22:00Z

Content type: release

Language: en

Sources: [Bootstrap.com](<https://devfeed.tech/sources/bootstrap-com.md>)

Topics: [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [Firefox](<https://devfeed.tech/topics/firefox.md>), [npm](<https://devfeed.tech/topics/npm.md>), [changelog](<https://devfeed.tech/topics/changelog.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Maintainers](<https://devfeed.tech/topics/maintainers.md>)

Tags: [changelog](<https://devfeed.tech/tags/changelog.md>), [dependency](<https://devfeed.tech/tags/dependency.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [github](<https://devfeed.tech/tags/github.md>), [maintainers](<https://devfeed.tech/tags/maintainers.md>), [npm](<https://devfeed.tech/tags/npm.md>), [release](<https://devfeed.tech/tags/release.md>), [v5](<https://devfeed.tech/tags/v5.md>)

### AI overview

Bootstrap v5.3.5 is a hotfix for an upstream Autoprefixer regression that caused floating form labels to remain floated in Firefox because of unintended CSS output. The release also includes documentation and dependency updates and was published to npm.

### Source excerpt

Bootstrap v5.3.5 was released as a hotfix for a regression from upstream in Autoprefixer that caused floating form labels to always be "floated" in Firefox due to unintended CSS output. Read the GitHub v5.3.5 changelog for a full list of changes (including a ton of documentation and dependency updates) in this release. Get the release Head to https://getbootstrap.com for the latest. It's also been pushed to npm: npm i bootstrap@v5.3.5 Support the team Visit our Open Collective page or our team members' GitHub profiles to help support the maintainers contributing to Bootstrap.

## Bootstrap 5.3.4

DevFeed: [Bootstrap 5.3.4](<https://devfeed.tech/articles/bootstrap-5-3-4-22294.md>)

Original publisher: [Read original article](<https://blog.getbootstrap.com/2025/04/03/bootstrap-5-3-4/>)

Author: Mark Otto

Published: 2025-04-03T15:22:00Z

Content type: release

Language: en

Sources: [Bootstrap.com](<https://devfeed.tech/sources/bootstrap-com.md>)

Topics: [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [changelog](<https://devfeed.tech/topics/changelog.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Sass](<https://devfeed.tech/topics/sass.md>)

Tags: [bug-fixes](<https://devfeed.tech/tags/bug-fixes.md>), [changelog](<https://devfeed.tech/tags/changelog.md>), [css](<https://devfeed.tech/tags/css.md>), [dark-mode](<https://devfeed.tech/tags/dark-mode.md>), [display](<https://devfeed.tech/tags/display.md>), [npm](<https://devfeed.tech/tags/npm.md>), [padding](<https://devfeed.tech/tags/padding.md>), [release](<https://devfeed.tech/tags/release.md>), [v5](<https://devfeed.tech/tags/v5.md>)

### AI overview

Bootstrap v5.3.4 is a release containing bug fixes and documentation updates. Highlighted changes include fixes for modal and offcanvas headers, close-button display, carousel behavior across color modes, floating-label alignment, Sass nested-rule deprecation warnings, and popover toggling.

### Source excerpt

Bootstrap v5.3.4 is here with several bug fixes and a load of documentation updates. Here are a handful of highlights from the CSS and JS changes: Fixed modal and offcanvas headers collapsing when any padding variables were set to 0. Fixed close button display in color modes. Fixed light mode carousel when in dark mode. Updated floating labels for better <select> alignment and other styling issues. Fixed a Sass 1.77.7 deprecation for nested rules Fixed popover toggling twice to close. Read the GitHub v5.3.4 changelog for a full list of changes (including a ton of documentation and dependency updates) in this release.

## Bootstrap 5.3.3

DevFeed: [Bootstrap 5.3.3](<https://devfeed.tech/articles/bootstrap-5-3-3-22293.md>)

Original publisher: [Read original article](<https://blog.getbootstrap.com/2024/02/20/bootstrap-5-3-3/>)

Author: Julien Déramond

Published: 2024-02-20T15:22:00Z

Content type: release

Language: en

Sources: [Bootstrap.com](<https://devfeed.tech/sources/bootstrap-com.md>)

Topics: [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [bug](<https://devfeed.tech/topics/bug.md>), [Documentation](<https://devfeed.tech/topics/documentation.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [selectors](<https://devfeed.tech/topics/selectors.md>), [Vite](<https://devfeed.tech/topics/vite.md>)

Tags: [bug-fixes](<https://devfeed.tech/tags/bug-fixes.md>), [css](<https://devfeed.tech/tags/css.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [improvements](<https://devfeed.tech/tags/improvements.md>), [release](<https://devfeed.tech/tags/release.md>), [selectors](<https://devfeed.tech/tags/selectors.md>), [vite](<https://devfeed.tech/tags/vite.md>)

### AI overview

Bootstrap v5.3.3 is a release focused on bug fixes, documentation improvements, and color-mode enhancements. It updates Sass variable imports, fixes a selector-engine regression involving multiple IDs, adjusts color-mode behavior and documentation, and includes miscellaneous component, validation, accessibility, and RTL fixes.

### Source excerpt

Bootstrap v5.3.3 is here with bug fixes, documentation improvements, and more follow-up enhancements for color modes. Keep reading for the highlights! Highlights Fixed a breaking change introduced with color modes where it was required to manually import variables-dark.scss when building Bootstrap with Sass. Now, _variables.scss will automatically import _variables-dark.scss. If you were already importing _variables-dark.scss manually, you should keep doing it as it won't break anything and will be the way to go in v6. Fixed a regression in the selector engine that wasn't able to handle multiple IDs anymore. Color modes Badges now use the .text-bg-* text utilities to be certain that the text is always readable (especially when the customized colors are different in light and dark modes). Fixed our color-modes.js script to handle the case where the OS is set to light mode and the auto color mode is used on the website. If you copied the script from our docs, you should apply this change to your own script. Fixed color schemes description in the color modes documentation to show that color-scheme() only accept light and dark values as parameters. Miscellaneous Allowed <dl>, <dt> and <dd> in the sanitizer. Dropped evenly items distribution for modal and offcanvas headers. Fixed the accordion CSS selectors to avoid inheritance issues when nesting accordions. Fixed the focus box-shadow for the validation stated form controls. Fixed the focus ring on focused checked buttons. Fixed the product example mobile navbar toggler. Changed the RTL processing of carousel control icons. Docs Dropped unnecessary right margin for example code blocks. Fixed emphasis text utilities usage in background utilities examples section. Added an technical explanation on how to render an accordion expanded by default. Changed Vite config path import in Vite guide. Enhanced the card image description of the .card-img-* classes. Mentioned shift-color() function in the Sass customization page among

## What's next for Dev Mode: annotations, compare changes, plugins, and more

DevFeed: [What's next for Dev Mode: annotations, compare changes, plugins, and more](<https://devfeed.tech/articles/what-s-next-for-dev-mode-annotations-compare-changes-plugins-and-more-9627.md>)

Original publisher: [Read original article](<https://www.figma.com/blog/dev-mode-ga/>)

Author: Avantika Gomes

Published: 2024-01-25T00:00:00Z

Content type: article

Language: en

Sources: [Figma Blog](<https://devfeed.tech/sources/figma-blog.md>)

Topics: [Figma](<https://devfeed.tech/topics/figma.md>), [VS Code Extension](<https://devfeed.tech/topics/vscode-extension.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [API](<https://devfeed.tech/topics/api.md>), [Code generation](<https://devfeed.tech/topics/code-generation.md>), [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [Tailwind CSS](<https://devfeed.tech/topics/tailwind.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [dev](<https://devfeed.tech/tags/dev.md>), [developers](<https://devfeed.tech/tags/developers.md>), [features](<https://devfeed.tech/tags/features.md>), [figma](<https://devfeed.tech/tags/figma.md>), [frameworks](<https://devfeed.tech/tags/frameworks.md>), [plugins](<https://devfeed.tech/tags/plugins.md>), [tailwind](<https://devfeed.tech/tags/tailwind.md>), [vs-code](<https://devfeed.tech/tags/vs-code.md>), [workflows](<https://devfeed.tech/tags/workflows.md>)

### AI overview

Figma introduces annotations in Dev Mode, improves visual and code comparisons, expands plugin capabilities, and updates the Figma for VS Code extension. The changes are intended to improve design handoff, provide connected measurements and context, and support customized developer workflows.

### Source excerpt

Today, we're introducing annotations to Dev Mode, along with improvements to compare changes, plugins, and the Figma for VS Code extension. Dev Mode will move out of free beta on January 31.

## Bootstrap 5.3.2

DevFeed: [Bootstrap 5.3.2](<https://devfeed.tech/articles/bootstrap-5-3-2-22292.md>)

Original publisher: [Read original article](<https://blog.getbootstrap.com/2023/09/14/bootstrap-5-3-2/>)

Author: Julien Déramond

Published: 2023-09-14T14:30:00Z

Content type: release

Language: en

Sources: [Bootstrap.com](<https://devfeed.tech/sources/bootstrap-com.md>)

Topics: [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [Dark Mode](<https://devfeed.tech/topics/dark-mode.md>), [Dart](<https://devfeed.tech/topics/dart.md>), [Documentation](<https://devfeed.tech/topics/documentation.md>), [npm](<https://devfeed.tech/topics/npm.md>)

Tags: [bug-fixes](<https://devfeed.tech/tags/bug-fixes.md>), [compatibility](<https://devfeed.tech/tags/compatibility.md>), [dark-mode](<https://devfeed.tech/tags/dark-mode.md>), [dart](<https://devfeed.tech/tags/dart.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [npm](<https://devfeed.tech/tags/npm.md>), [release](<https://devfeed.tech/tags/release.md>), [v5](<https://devfeed.tech/tags/v5.md>)

### AI overview

Bootstrap v5.3.2 is a release focused on bug fixes, documentation improvements, and color mode enhancements. It fixes Dart Sass deprecation warnings and collapse targets using multiple IDs, improves contrast in light and dark modes, adds color customization, and updates documentation and community links.

### Source excerpt

Bootstrap v5.3.2 is here with bug fixes, documentation improvements, and more follow-up enhancements for color modes. Keep reading for the highlights! Highlights Passing a percentage unit to the global abs() is deprecated since Dart Sass v1.65.0. It resulted in a deprecation warning when compiling Bootstrap with Dart Sass. This has been fixed internally by changing the values passed to the divide() function. The divide() function has not been fixed itself so that we can keep supporting node-sass cross-compatibility. In v6, this won't be an issue as we plan to drop support for node-sass. Using multiple ids in a collapse target wasn't working anymore and has been fixed. Color modes Increased color contrast of form range track background in light and dark modes. Fixed table state rendering for color modes with a focus on the striped table in dark mode to increase color contrast. Allow <mark> color customization for color modes. Docs Added alternative CDNs section in Getting started -> Download. Added Discord and Bootstrap subreddit links in README and Getting started -> Introduction: Discord maintained by the community Bootstrap subreddit Get the release Head to https://getbootstrap.com for the latest. It's also been pushed to npm:

## Bootstrap Icons v1.11.0

DevFeed: [Bootstrap Icons v1.11.0](<https://devfeed.tech/articles/bootstrap-icons-v1-11-0-22291.md>)

Original publisher: [Read original article](<https://blog.getbootstrap.com/2023/09/12/bootstrap-icons-1-11-0/>)

Author: Mark Otto

Published: 2023-09-12T00:01:00Z

Content type: release

Language: en

Sources: [Bootstrap.com](<https://devfeed.tech/sources/bootstrap-com.md>)

Topics: [releases](<https://devfeed.tech/topics/releases.md>), [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>)

Tags: [figma](<https://devfeed.tech/tags/figma.md>), [figma-community](<https://devfeed.tech/tags/figma-community.md>), [github](<https://devfeed.tech/tags/github.md>), [icons](<https://devfeed.tech/tags/icons.md>), [issue-tracker](<https://devfeed.tech/tags/issue-tracker.md>), [npm](<https://devfeed.tech/tags/npm.md>), [release](<https://devfeed.tech/tags/release.md>), [search](<https://devfeed.tech/tags/search.md>), [v1](<https://devfeed.tech/tags/v1.md>)

### AI overview

Bootstrap Icons v1.11.0 adds 100 new icons, bringing the collection to more than 2,000 icons. The release also introduces version tags for icon pages, npm and Composer installation options, GitHub downloads, and a newly published Figma Community file.

### Source excerpt

Bootstrap Icons v1.11.0 has arrived with 100 new icons--including new floppy disk icons, additional brand icons, new person icons, new emojis, some birthday cake, a few new science icons, and more. We're now at over 2,000 icons! 100 new icons Here's a quick look at all the new icons in v1.11.0: Check out the pull request for all the details on which icons were added and which were updated.

## Building a Bootstrap App with Rails 7 and SCSS Files

DevFeed: [Building a Bootstrap App with Rails 7 and SCSS Files](<https://devfeed.tech/articles/building-a-bootstrap-app-with-rails-7-and-scss-files-28284.md>)

Original publisher: [Read original article](<http://fuzzyblog.io/blog/rails/2022/06/22/building-a-bootstrap-app-with-rails-7-and-scss-files.html>)

Author: Fuzzygroup

Published: 2022-06-22T06:12:00Z

Content type: tutorial

Language: en

Sources: [Scott Johnson](<https://devfeed.tech/sources/scott-johnson.md>)

Topics: [Rails](<https://devfeed.tech/topics/rails.md>), [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [CSS](<https://devfeed.tech/topics/css.md>)

Tags: [app](<https://devfeed.tech/tags/app.md>), [bootstrap](<https://devfeed.tech/tags/bootstrap.md>), [front-end](<https://devfeed.tech/tags/front-end.md>), [rails](<https://devfeed.tech/tags/rails.md>), [sass](<https://devfeed.tech/tags/sass.md>), [scss](<https://devfeed.tech/tags/scss.md>)

### AI overview

A walkthrough of setting up a Rails 7 application with Bootstrap and SCSS files, including generating the app, adding sassc-rails, copying stylesheets, and managing import order for asset compilation.

### Source excerpt

As is too often the case, I find that the initial aspect of getting a modern app (Bootstrap, Tailwind, React) initially setup to be the most frustrating aspect of Rails. Given that I like to spin up new apps pretty regularly, well, I spend a lot of time being frustrated with an old man's grumbling of: It didn't used to be this hard. No it wasn't this hard. And while I still don't really understand asset compilation, I did recently put together a new app where I pulled in SCSS files using variables from a different app and I can start to see it. This blog post walks through a Rails 7 app using .scss files. Step 1: Rails New Here's your Rails 7 new command to generate a new app with Bootstrap: rails new scss_test1 --css bootstrap Yep. That's it. Whoa!!! There are also options to use Tailwind. I found this technique in the Saeloun article linked below and I will be forever grateful; seriously - thank you. Step 2: Add the Sassc-Rails Gem I believe this Gem is needed as sassc support is officially deprecated. But I might be wrong about this; front end stuff changes with every Rails release so if I'm wrong, well, sigh. gem "sassc-rails" NOTE: Please see the last section "That Mysterious Error"; you may not want this in your Gemfile or: Step 3: Copy In Your SCSS Files If you are pulling in SCSS files then you need to copy them into your: app/assets/stylesheets directory. They can exist elsewhere but that directory is for stylesheets so differing on this point confuses me. Modify Your Include Directives This is the tricky bit and where you simply have to experiment. The thing to understand is that asset compilation is just that - compilation.If you're old school enough that you understand the analogy of your stylesheet files becoming akin to a make file with all the dark magic that entails, perhaps that helps. In your stylesheets directory there will be an initial stylesheet file, for me, it was application_bootstrap.scss and then I had copied in a number of other styleshee

## Getting Font Awesome Working On Rails 7 and Bootstrap albeit Perhaps Poorly

DevFeed: [Getting Font Awesome Working On Rails 7 and Bootstrap albeit Perhaps Poorly](<https://devfeed.tech/articles/getting-font-awesome-working-on-rails-7-and-bootstrap-albeit-perhaps-poorly-28280.md>)

Original publisher: [Read original article](<http://fuzzyblog.io/blog/rails/2022/06/08/getting-font-awesome-working-on-rails-7-and-bootstrap-albeit-perhaps-poorly.html>)

Author: Fuzzygroup

Published: 2022-06-08T17:27:00Z

Content type: tutorial

Language: en

Sources: [Scott Johnson](<https://devfeed.tech/sources/scott-johnson.md>)

Topics: [Rails](<https://devfeed.tech/topics/rails.md>), [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [blog-post](<https://devfeed.tech/tags/blog-post.md>), [bootstrap](<https://devfeed.tech/tags/bootstrap.md>), [css](<https://devfeed.tech/tags/css.md>), [fontawesome](<https://devfeed.tech/tags/fontawesome.md>), [front-end-development](<https://devfeed.tech/tags/front-end-development.md>), [html](<https://devfeed.tech/tags/html.md>), [rails](<https://devfeed.tech/tags/rails.md>)

### AI overview

A blog post documents a simple, imperfect method for adding Font Awesome, including its brands extension, to a Rails 7 application, and also explains how to add Bootstrap 5 icons. The approach downloads the assets locally, places files in Rails asset and public directories, updates the asset manifest and configuration, and adjusts stylesheet paths.

### Source excerpt

I am not a front end engineer - but I'm on a project right now with heavy front end requirements. This blog post documents how I got Font Awesome running on by application including the brands extension. It is by no means a great way to do it and I know: I have more overhead than needed I did not take advantage of Rails 7 facilities in the best way This skips the gem so you lose another dependency from Gemfile I made this work and I sort of understand it but if you asked me to explain it, I think I'd fail the class. Today I wanted to do nothing more than display a github icon. And it does that. Still this works and it is conceptually simple. NOTE: I full well expect to return to this and figure out the "right" way to do this. However, I'm in heavy greenfield development mode and the desire to simply make it work and GIVE ME MY DAMN ICONS NOW is the paramount concern. In greenfield development mode, nothing is more important than: Productivity / not getting bogged down. Not getting discouraged when trying to do something that should be simple (display a damn icon). So much of modern front end development is just plain ridiculously complicated for simple things like making a font work or displaying an image. Font Awesome Steps Download Font Awesome Locally and Decompress It. This requires an account I think. Move stylesheets/all.css to app/assets/stylesheets/ Move webfonts (directory and all) to public/ (yes public) Add //= link all.css to manifest.js In config/initializers/assets.rb add: Rails.application.config.assets.paths " Rails.root.join("assets/webfonts") (yes that isn't the right path but it still works; who knows???) In application.html.erb you need to make one change. This code: <%= stylesheet_link_tag "all"%> Here's an example of the html to use to generate a font: <i class="fas fa-github"></i> <i class="fas fa-camera"></i> Sidebar: How to Add Bootstrap Icons Also This set of steps let you add the Bootstrap 5 icons to the mix also and is based on the same i

## When Rails 7 Doesn't Process application.js

DevFeed: [When Rails 7 Doesn't Process application.js](<https://devfeed.tech/articles/when-rails-7-doesn-t-process-application-js-28274.md>)

Original publisher: [Read original article](<http://fuzzyblog.io/blog/rails/2022/04/22/when-rails-7-doesn-t-process-application-js.html>)

Author: Fuzzygroup

Published: 2022-04-22T22:28:00Z

Content type: article

Language: en

Sources: [Scott Johnson](<https://devfeed.tech/sources/scott-johnson.md>)

Topics: [Rails](<https://devfeed.tech/topics/rails.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [asset-pipeline](<https://devfeed.tech/tags/asset-pipeline.md>), [bootstrap](<https://devfeed.tech/tags/bootstrap.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [modern-web-development](<https://devfeed.tech/tags/modern-web-development.md>), [pipeline](<https://devfeed.tech/tags/pipeline.md>), [rails](<https://devfeed.tech/tags/rails.md>)

### AI overview

A troubleshooting post about a Rails 7 application in which Bootstrap popovers did not work because application.js appeared not to be processed or included in the page source. The author discusses tracing the issue to JavaScript and the asset pipeline, but the supplied text ends before the resolution.

### Source excerpt

This is more than a mildly embarrassing post to have to write but it is an interesting example of how habits can bite you hard - so, so hard. I recently wanted to start on an application and actually be current on everything: Rails, Bootstrap, etc. I have long admitted to having issues with respect to "modern" web development (specifically JavaScript / the asset pipeline) and I'm mildly starting to deal with those issues. I began with a BootrAils tutorial and started to work through it. I got all the way to the end and I noticed that I simply could NOT get the popovers to work. I don't claim to have a great understanding of the asset pipeline but I do know that it is a preprocessor that should get invoked on every page request. I traced the problem back to application.js seemingly not getting processed (a view source didn't show it). So, just to be sure, I added this to application

## Getting Started with Elm 01 - The Very Basics

DevFeed: [Getting Started with Elm 01 - The Very Basics](<https://devfeed.tech/articles/getting-started-with-elm-01-the-very-basics-28164.md>)

Original publisher: [Read original article](<http://fuzzyblog.io/blog/elm/2022/03/29/getting-started-with-elm-01-the-very-basics.html>)

Author: Fuzzygroup

Published: 2022-03-29T12:58:00Z

Content type: tutorial

Language: en

Sources: [Scott Johnson](<https://devfeed.tech/sources/scott-johnson.md>)

Topics: [Elm](<https://devfeed.tech/topics/elm.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [Laravel](<https://devfeed.tech/topics/laravel.md>), [Terminal](<https://devfeed.tech/topics/terminal.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [elm](<https://devfeed.tech/tags/elm.md>), [getting-started](<https://devfeed.tech/tags/getting-started.md>), [guide](<https://devfeed.tech/tags/guide.md>), [installation](<https://devfeed.tech/tags/installation.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [terminal](<https://devfeed.tech/tags/terminal.md>)

### AI overview

A beginner tutorial for Elm that covers installation, the elm terminal command, project creation with elm init, the elm.json file, and adding Bootstrap support. It also compares Elm's setup with Rails and Laravel while using a Laravel back end as a reference point.

### Source excerpt

Elm is an interesting new front end language technology based on a functional language that generates JavaScript transparently and has a focus on great documentation and ease of learning. A good starting point is the Guide. In this blog post, I'm going to walk through the initial steps. Along the way I'll draw some comparisons to things like Rails or Laravel. My goal in all this is re-implementing a recent project I built with a JavaScript front end and a Laravel back end. I'll us the same Laravel back end to see how Elm stacks up. Installation There is an installer for Elm here which installs the language and binds it to the elm terminal command. Sidebar: Trying Out Elm There is an excellent online console for trying out Elm here: https://elm-lang.org/try Building a Project I keep all my projects organized by their language type so I have a directory structure like: ~/code/elm Within the elm directory you want to start by creating a project directory. Mine is named kit_selector3: cd ~/code/elm mkdir kit_selector3 Once you have a project directory built then you want to to use the init command: elm init Please note that this is very unlike Rails or Laravel which build the project directory when you use their equivalent of elm init (rails new kit_selector3 or composer create-project laravel/laravel kit_selector3). This builds the bare minimum skeleton for an elm project which looks like this: . ├── elm-stuff │ └── 0.19.1 │ ├── Main.elmi │ ├── Main.elmo │ ├── d.dat │ ├── i.dat │ ├── lock │ └── o.dat ├── elm.json └── src The file elm.json is there to handle component installation. Let's Add Bootstrap Support Given that it is the 21st century and virtually anything we build needs to work nicely on a mobile phone, I generally start everything these days with Bootstrap. Happily there is a Bootstrap component for elm. We can argue about CSS grids and such but Bootstrap, well, just plain works. Here's how we get Bootstrap added to our "application" (right now there is so li

## Forcing Grid Stacking with Bootstrap on Mobile

DevFeed: [Forcing Grid Stacking with Bootstrap on Mobile](<https://devfeed.tech/articles/forcing-grid-stacking-with-bootstrap-on-mobile-28132.md>)

Original publisher: [Read original article](<http://fuzzyblog.io/blog/bootstrap/2021/12/23/forcing-grid-stacking-with-bootstrap-on-mobile.html>)

Author: Fuzzygroup

Published: 2021-12-23T17:33:00Z

Content type: tutorial

Language: en

Sources: [Scott Johnson](<https://devfeed.tech/sources/scott-johnson.md>)

Topics: [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [bootstrap](<https://devfeed.tech/tags/bootstrap.md>), [html](<https://devfeed.tech/tags/html.md>), [mobile](<https://devfeed.tech/tags/mobile.md>)

### AI overview

The article explains that a Bootstrap layout failed to stack or wrap correctly on mobile because the page lacked a viewport meta tag. Adding `<meta name="viewport" content="width=device-width, initial-scale=1">` to the HTML head fixed the mobile formatting.

### Source excerpt

I recently had the situation where a Bootstrap application: Worked perfectly on a desktop with a side by side layout Properly wrapped on desktop when the window was resized down to a mobile like form factor Failed to ever wrap on mobile showing just a smaller version of the desktop I puzzled over this quite a bit until I ran a google search for "bootstrap text too small on mobile" which led me to this directive: <meta name="viewport" content="width=device-width, initial-scale=1"> This needs to be inserted into your html head element and then, like magic, made everything format perfectly on mobile.

## Implementing a Master Template and Bootstrap in Laravel 8

DevFeed: [Implementing a Master Template and Bootstrap in Laravel 8](<https://devfeed.tech/articles/implementing-a-master-template-and-bootstrap-in-laravel-8-28187.md>)

Original publisher: [Read original article](<http://fuzzyblog.io/blog/laravel/2021/06/10/implementing-a-master-template-in-laravel-8.html>)

Author: Fuzzygroup

Published: 2021-06-10T14:19:00Z

Content type: tutorial

Language: en

Sources: [Scott Johnson](<https://devfeed.tech/sources/scott-johnson.md>)

Topics: [Laravel](<https://devfeed.tech/topics/laravel.md>), [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Rails](<https://devfeed.tech/topics/rails.md>)

Tags: [bootstrap](<https://devfeed.tech/tags/bootstrap.md>), [css](<https://devfeed.tech/tags/css.md>), [getting-started](<https://devfeed.tech/tags/getting-started.md>), [html](<https://devfeed.tech/tags/html.md>), [laravel](<https://devfeed.tech/tags/laravel.md>), [php](<https://devfeed.tech/tags/php.md>), [route](<https://devfeed.tech/tags/route.md>), [structure](<https://devfeed.tech/tags/structure.md>), [testing](<https://devfeed.tech/tags/testing.md>), [yield](<https://devfeed.tech/tags/yield.md>)

### AI overview

A tutorial for Laravel 8 that explains how to create a reusable master Blade layout, use yield directives for page sections, add Bootstrap CSS and JavaScript, apply the layout to views, define an About route, and test the result.

### Source excerpt

This blog post continues from my Hello World tutorial and adds a master layout that you can use to add a consistent HTML structure to all pages. This is very similar, in a Rails context, to application.html.erb. Step 1: Create a layouts Directory In your application directory, start my creating the directory: mkdir resources/views/layouts Step 2: Create a master.blade.php Layout In your application directory, create the layout file: touch resources/views/layouts/master.blade.php Step 3: Add the HTML Boilerplate Start by adding to the master.blade.php file, your basic HTML stuff: <html> <head> <title> </title> </head> <body> </body> </html> Step 4: Add Yield Directives Just as in Rails, Laravel uses a yield directive during template processing to indicate where things go. Here is the HTML boilerplate marked up using yield directives: <html> <head> <title> @yield('title') </title> </head> <body> @yield('content') </body> </html> These yield statements indicate that two named sections of stuff, title and content, will be inserted at their respective locations. Adding Bootstrap Given that we have a master template, we can also use it to add Bootstrap to our Hello World app. Go to the Get Bootstrap site, click Getting Started, and copy the main CSS url. And add it below as follows: <html> <head> <title> @yield('title') </title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> @yield('content') </body> </html> Now we need to add the JavaScript so scroll down in the above Get Boostrap page and copy the JavaScript script tag. And add it below as follows: <html> <head> <title> @yield('title') </title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anon

## Dear Bootstrap Why Aren't My Tables Full Width

DevFeed: [Dear Bootstrap Why Aren't My Tables Full Width](<https://devfeed.tech/articles/dear-bootstrap-why-aren-t-my-tables-full-width-28131.md>)

Original publisher: [Read original article](<http://fuzzyblog.io/blog/bootstrap/2019/12/07/dear-bootstrap-why-aren-t-my-tables-full-width.html>)

Author: Fuzzygroup

Published: 2019-12-07T00:00:00Z

Content type: tutorial

Language: en

Sources: [Scott Johnson](<https://devfeed.tech/sources/scott-johnson.md>)

Topics: [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Code](<https://devfeed.tech/topics/code.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [bootstrap](<https://devfeed.tech/tags/bootstrap.md>), [css](<https://devfeed.tech/tags/css.md>), [how-to](<https://devfeed.tech/tags/how-to.md>)

### AI overview

This troubleshooting article explains why Bootstrap tables may not span the full width of their container. It says the table class adds styling and an inset margin, and recommends omitting the table class while retaining table-condensed when full width is needed, at the cost of losing the table's lines.

### Source excerpt

Perhaps I shouldn't have insomnia and then code into the wee hours because this is an exchange that I can see happening if only I could email Bootstrap in the style of Ann Landers ... Dear Bootstrap, I was hoping that you could explain to me why my tables of data aren't full width. Here's an example which isn't full width: And here's an example which is: The difference between the two bits of markup is: The non full width one: <table class="table table-condensed table-hover table-striped" style="width:100%"> The full width one: <table class="table-condensed table-hover table-striped" style="width:100%"> Here's an example of what this looks like in full: Thank you. Confused Web Developer that Struggles Mightily with CSS Dear Confused Web Developer that Struggles Mightily with CSS, I'd love to explain this to you but I also find the bootstrap table model confusing as heck. What I can tell you is that, for reasons, I don't understand, adding table seems to have two effects: it improves the lines between the data it sets a margin on the table to inset it from the left and right borders And, no, I can't tell you how to work around this but what I can tell you is this: When you want a table to span the full width then omit the table class and just use table-condensed. And, yes, you're going to lose the nice lines; so sorry; nothing can be done here. And I'd direct you to my table documentation where you can find this discussed in full but there's simply no mention of it anywhere in there so I'd assume that even we don't understand this. My sincere apologies ... Bootstrap 4, Your Friendly Neighborhood CSS Grid

## Adding a Show / Hide Feature to Your Bootstrap 4 Divs

DevFeed: [Adding a Show / Hide Feature to Your Bootstrap 4 Divs](<https://devfeed.tech/articles/adding-a-show-hide-feature-to-your-bootstrap-4-divs-28130.md>)

Original publisher: [Read original article](<http://fuzzyblog.io/blog/bootstrap/2019/11/10/adding-a-show-hide-feature-to-your-bootstrap-divs.html>)

Author: Fuzzygroup

Published: 2019-11-10T00:00:00Z

Content type: tutorial

Language: en

Sources: [Scott Johnson](<https://devfeed.tech/sources/scott-johnson.md>)

Topics: [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [bootstrap](<https://devfeed.tech/tags/bootstrap.md>), [css](<https://devfeed.tech/tags/css.md>), [html](<https://devfeed.tech/tags/html.md>)

### AI overview

A concise tutorial showing how to add a click-triggered show/hide feature to Bootstrap 4 content using a collapsible div, an anchor, and matching data attributes.

### Source excerpt

I know this is simple but I am JavaScript / CSS challenged so I'm writing it down because I've had continuous problems with it in the past and I know that this solution works for Bootstrap 4. Let's say that you have a div that you want hidden and only displayed by a button when you click it. Here's the solution: <a href="#feeds" class="btn btn-default" data-toggle="collapse">Toggle Feeds</a> <div id="feeds" class="collapse"> This div (feeds) is hidden by default. </div> Here's how this works: Add a div named feeds around the content you want hidden. This needs to have a class named collapse added to it because its default display state is collapsed. Add an A tag with an href of "#feeds" above the content and a data-toggle named collapse. When the user clicks the A tag then the a tag's data-toggle will be applied to the matching div. Thank you to this Stack Overflow post.

## Using VueJS + GraphQL to make Practical Magic

DevFeed: [Using VueJS + GraphQL to make Practical Magic](<https://devfeed.tech/articles/using-vuejs-graphql-to-make-practical-magic-31320.md>)

Original publisher: [Read original article](<https://nystudio107.com/blog/using-vuejs-graphql-to-make-practical-magic>)

Author: andrew@nystudio107.com (Andrew Welch)

Published: 2018-08-27T22:29:00Z

Content type: tutorial

Language: en

Sources: [nystudio107 | Articles on modern web development.](<https://devfeed.tech/sources/nystudio107-articles-on-modern-web-development.md>)

Topics: [GraphQL](<https://devfeed.tech/topics/graphql.md>), [vuejs](<https://devfeed.tech/topics/vuejs.md>), [Content Management System](<https://devfeed.tech/topics/cms.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [axios](<https://devfeed.tech/topics/axios.md>), [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [Jamstack](<https://devfeed.tech/topics/jamstack.md>)

Tags: [auto-complete](<https://devfeed.tech/tags/auto-complete.md>), [axios](<https://devfeed.tech/tags/axios.md>), [bootstrap](<https://devfeed.tech/tags/bootstrap.md>), [craft](<https://devfeed.tech/tags/craft.md>), [everyday](<https://devfeed.tech/tags/everyday.md>), [form](<https://devfeed.tech/tags/form.md>), [graphql](<https://devfeed.tech/tags/graphql.md>), [headless](<https://devfeed.tech/tags/headless.md>), [insights](<https://devfeed.tech/tags/insights.md>), [jamstack](<https://devfeed.tech/tags/jamstack.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [like](<https://devfeed.tech/tags/like.md>), [magic](<https://devfeed.tech/tags/magic.md>), [practical](<https://devfeed.tech/tags/practical.md>), [problems](<https://devfeed.tech/tags/problems.md>), [saving](<https://devfeed.tech/tags/saving.md>), [searching](<https://devfeed.tech/tags/searching.md>), [solve](<https://devfeed.tech/tags/solve.md>), [submission](<https://devfeed.tech/tags/submission.md>), [using](<https://devfeed.tech/tags/using.md>), [vuejs](<https://devfeed.tech/tags/vuejs.md>)

### AI overview

A practical tutorial showing how to use VueJS and GraphQL with a headless Craft CMS backend to implement auto-complete search and save contact-form submissions. It introduces the frontend and backend tooling used in the examples, including Axios, Bootstrap 4, Craft CMS, and CraftQL.

### Source excerpt

Make some practical magic with VueJS + GraphQL to solve everyday problems like auto-complete searching and form submission saving with a headless Craft CMS server

## Introducing Nuskha

DevFeed: [Introducing Nuskha](<https://devfeed.tech/articles/introducing-nuskha-20010.md>)

Original publisher: [Read original article](<http://engineering.hackerearth.com/2018/07/07/introducing-nuskha/>)

Published: 2018-07-07T00:00:00Z

Content type: article

Language: en

Sources: [HackerEarth](<https://devfeed.tech/sources/hackerearth.md>)

Topics: [Front end](<https://devfeed.tech/topics/frontend.md>), [Framework](<https://devfeed.tech/topics/framework.md>), [React](<https://devfeed.tech/topics/react.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [Hackathon](<https://devfeed.tech/topics/hackathon.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [components](<https://devfeed.tech/tags/components.md>), [css](<https://devfeed.tech/tags/css.md>), [developer](<https://devfeed.tech/tags/developer.md>), [development](<https://devfeed.tech/tags/development.md>), [framework](<https://devfeed.tech/tags/framework.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [hackathon](<https://devfeed.tech/tags/hackathon.md>), [react](<https://devfeed.tech/tags/react.md>), [software](<https://devfeed.tech/tags/software.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

HackerEarth introduces Nuskha, an internal front-end framework created to provide reusable CSS classes and components for web interfaces. The article describes its evolution from an initial shared stylesheet into a framework intended to unify components across React projects, improve consistency and ease of use, speed development, and reduce duplicated code.

### Source excerpt

History We at HackerEarth created a single-page document with common and special CSS classes to make layouts, grids, buttons, inputs, tables, tooltips, and form elements in late 2017. That was our first attempt to develop on our own front-end framework. Old Nuskha screens: Framework is a platform, foundation on which ready software solutions are built, in this particular case - web interfaces. For this purpose front-end framework consists of ready components, which are used by a developer when working on a project. What is more, aforementioned components, if necessary, can be modified or adjusted to current needs. - Merix Studio Our development was inspired from Bootstrap. But, we still had miles to go before calling it a framework. To be a part of something that will impact the whole organization was exciting for the bunch of us. After rejecting Kriya Kalaap, Kalakari, Retro, Tattva, Lipstick, and many more, we named our nascent framework Nuskha. "The name 'Nuskha' is inspired by one of the art deities "Nuska" from the Mesopotamian mythology. The word 'Nuskha' is a Hindi word which translates to 'formula' in English - a formula to create or build something." Old Nuskha helped but was still inefficient. We did not have any React components. We had started developing one of our products in React (version 16+) while the other product was in the transitioning phase. With strict deadlines for other important tasks, we were unable to contribute much to Nuskha and inevitably the implementation of the same components in different projects was duplicated. We needed a better framework to unify the components. We needed it for consistency, ease of use, and faster development. Yes, we also wanted to DRY up our code base. Fast forward to few months, as the tradition at HackerEarth goes, we had our internal hackathon scheduled. The timing was perfect. I paired up with Akanksha, another Frontend Engineer at HackerEarth, this time to build Nuskha 2.0 which will eventually be known

## Discover the new ReactOS website

DevFeed: [Discover the new ReactOS website](<https://devfeed.tech/articles/discover-the-new-reactos-website-33105.md>)

Original publisher: [Read original article](<https://reactos.org/project-news/discover-new-reactos-website2/>)

Published: 2016-02-08T00:00:00Z

Content type: article

Language: en

Sources: [Front Page on ReactOS Website](<https://devfeed.tech/sources/front-page-on-reactos-website.md>)

Topics: [ReactOS](<https://devfeed.tech/topics/reactos.md>), [Website](<https://devfeed.tech/topics/website.md>), [Drupal](<https://devfeed.tech/topics/drupal.md>), [IRC](<https://devfeed.tech/topics/irc.md>), [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [jira](<https://devfeed.tech/topics/jira.md>)

Tags: [bootstrap](<https://devfeed.tech/tags/bootstrap.md>), [chat](<https://devfeed.tech/tags/chat.md>), [features](<https://devfeed.tech/tags/features.md>), [free](<https://devfeed.tech/tags/free.md>), [history](<https://devfeed.tech/tags/history.md>), [jira](<https://devfeed.tech/tags/jira.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [os](<https://devfeed.tech/tags/os.md>), [react](<https://devfeed.tech/tags/react.md>), [reactos](<https://devfeed.tech/tags/reactos.md>), [responsive](<https://devfeed.tech/tags/responsive.md>), [website](<https://devfeed.tech/tags/website.md>), [win32](<https://devfeed.tech/tags/win32.md>), [winapi](<https://devfeed.tech/tags/winapi.md>)

### AI overview

The ReactOS team describes a complete redesign of its website ahead of the 0.4 release. The first stage focused on improving information flow through IRC integration, live Jira activity, social-network updates, responsive Bootstrap-based layout, and site structure changes.

### Source excerpt

As you may have noticed, the ReactOS website has been completely revamped. During the last year, the ReactOS Team has been focusing on entering the 0.4 era, the latest major alpha series before the 0.5 Beta. A common feeling among the ReactOS community was that our (now old) website was not good enough from content, design, and technology points of view to honor one of the greatest releases in the ReactOS history.

## Retrospective 2012

DevFeed: [Retrospective 2012](<https://devfeed.tech/articles/retrospective-2012-21180.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2012/12/retrospective-2012/>)

Published: 2012-12-30T00:00:00Z

Content type: opinion

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Jekyll](<https://devfeed.tech/topics/jekyll.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [GitHub](<https://devfeed.tech/topics/github.md>), [hosting](<https://devfeed.tech/topics/hosting.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [ASP.NET](<https://devfeed.tech/topics/aspnet.md>), [mvc](<https://devfeed.tech/topics/mvc.md>), [JSON](<https://devfeed.tech/topics/json.md>), [Single-page application (SPA)](<https://devfeed.tech/topics/spa.md>)

Tags: [asp-net](<https://devfeed.tech/tags/asp-net.md>), [css](<https://devfeed.tech/tags/css.md>), [github](<https://devfeed.tech/tags/github.md>), [hosting](<https://devfeed.tech/tags/hosting.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [jekyll](<https://devfeed.tech/tags/jekyll.md>), [json](<https://devfeed.tech/tags/json.md>), [mvc](<https://devfeed.tech/tags/mvc.md>), [rest](<https://devfeed.tech/tags/rest.md>), [retrospective](<https://devfeed.tech/tags/retrospective.md>)

### AI overview

A personal retrospective of 2012 covering a move from Blogger to a Jekyll static site hosted on GitHub, a site redesign using Bootstrap, and increased JavaScript work. The author also describes replacing ASP.NET WebForms front ends with JavaScriptMVC applications and ASP.NET MVC JSON REST endpoints.

### Source excerpt

Lorem ipsum dolor sit amet

## UP: A Jekyll theme

DevFeed: [UP: A Jekyll theme](<https://devfeed.tech/articles/up-a-jekyll-theme-37870.md>)

Original publisher: [Read original article](<https://carlosbecker.com/posts/up-a-jekyll-theme/>)

Author: Carlos Alexandro Becker

Published: 2012-12-16T00:00:00Z

Content type: tutorial

Language: en

Sources: [Carlos Becker](<https://devfeed.tech/sources/carlos-becker.md>)

Topics: [Jekyll](<https://devfeed.tech/topics/jekyll.md>), [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [GitHub Pages](<https://devfeed.tech/topics/github-pages.md>), [Markdown](<https://devfeed.tech/topics/markdown.md>), [Deployment](<https://devfeed.tech/topics/deployment.md>), [Atom Feed](<https://devfeed.tech/topics/atom-feed.md>)

Tags: [atom](<https://devfeed.tech/tags/atom.md>), [bootstrap](<https://devfeed.tech/tags/bootstrap.md>), [css](<https://devfeed.tech/tags/css.md>), [deployment](<https://devfeed.tech/tags/deployment.md>), [github-pages](<https://devfeed.tech/tags/github-pages.md>), [html](<https://devfeed.tech/tags/html.md>), [jekyll](<https://devfeed.tech/tags/jekyll.md>), [markdown](<https://devfeed.tech/tags/markdown.md>)

### AI overview

The article introduces Up, a clean, responsive Bootstrap-based Jekyll theme designed to be easy to modify for personal blogs. It explains installation, customization, post creation, and deployment with GitHub Pages.

### Source excerpt

After a while using Jekyll Bootstrap, I just realized that it was so much bloated. Then, few days ago, I forked the old Zach Holman's blog, and started to tweak my own theme based on theirs (that now is opensource). At first, I like it, but after a while, I just start thinking that it had a "old style" design.

[Next page](<https://devfeed.tech/topics/bootstrap.md?cursor=WyIyMDEyLTEyLTE2VDAwOjAwOjAwKzAwOjAwIiwgIjRjYjYzZThjLTQyNDAtNDQzMC04YmQyLTYyMjk5M2JjYmNmYyJd>)