@webpixels/css NPM

Install via npm

For most projects (and to take advantage of the customization features), you'll want to install Webpixels CSS and its peer-dependencies via npm.

npm install @webpixels/css@latest bootstrap@latest --save-dev

This will automatically install the latest Bootstrap version, so you don't need to do that manually.

Create the Sass files

In your scss folder create two new files and name them:

main.scss
utility.scss

Import the base styles and components

In your main.scss, you’ll import the source Sass files. Bootstrap is automatically loaded when you use the source files, so you don't need to worry about what Bootstrap files should you incorporate in your styles.

@import "@webpixels/css/base";
@import "@webpixels/css/forms";

// Load all the components
@import "@webpixels/css/components";

or pick the parts you need:

@import "@webpixels/css/base";
@import "@webpixels/css/forms";

// Load only the components you use
@import "@webpixels/css/components/alerts";
@import "@webpixels/css/components/avatars";
@import "@webpixels/css/components/buttons";
@import "@webpixels/css/components/navbars";
@import "@webpixels/css/components/cards";

Click here to see the complete list of available components.

Import the utility classes

In Webpixels CSS you'll notice that we don't create custom styles, but rather make use of the utility classes. We are using the new Bootstrap Utility API to generate a comprehensive list of classes.

In your utility.scss you'll import all the utilities:

@import "@webpixels/css/utilities";

Documentation

Check out our documentation website.

Integrations

If you want to see how it works, check out these functional examples of using Bootstrap and Webpixels CSS in common JS frameworks like Webpack, Parcel, Vite, and more!

See all integrations

Detailed UI components library

Explore, copy, use and mix hundreds of carefully crafted components made just for Bootstrap.

Explore components

Beautiful designer-made templates

Get your new web design project started with these amazing templates, or copy and paste elements into your existing projects to give them a creative boost.

Explore templates