Make developing with Bootstrap 5 even easier by using our free design system package (DSP) for Visual Studio Code. Gain direct access to Bootstrap code snippets and documentation with Intellisense right in the VS Code editor. This allows you to stay in flow and focus on development, instead of switching between your editor and the docs.

Learn more about the Bootstrap 5 DSP

To install Adobe Bootstrap DSP in your project, please run:

npm install @foxbox/adobe-bootstrap-dsp

• Install the Adobe XD extension for VS Code
• Open the Adobe XD extension for VS Code (Cmd+Opt+X for Mac users) and select Load package.
• Navigate to your node_modules folder and load the bootstrap-dsp folder located inside @foxbox/adobe-bootstrap-dsp (DSPs contain a dsp.json file at the root level).
• Hit the Start Editing button
• Hit the Finish Editing button

With that a new build will be triggered and the dist folder will be updated

• Change directory to plainHTML-project
• Open the index.html file in a browser

Note: refresh manually everytime you update the index.html

• Change directory to next-project
• Run npm i to install the dependencies
• Run npm run dev
• Open http://localhost:3000 on the browser

For you to use the code snippets correctly, you have to install react-bootstrap and import the corresponding component

import { Button } from 'react-bootstrap';

function HomePage() {
  return <Button variant="primary">Primary Button</Button>;
}

export default HomePage;

• Bootstrap 5 UI Kit assets: https://assets.adobe.com/public/4ed7617e-4c25-4294-6cc0-d240c39f8a7e
• Adobe XD VSCode Extension documentation: https://github.com/AdobeXD/design-system-package-dsp

Foxbox Digital is an award-winning digital product agency, headquartered in Chicago. We partner with clients ranging from Fortune 50 companies to high-growth startups and everyone in between to design, develop, and deliver successful digital experiences.