Builder with Custom Components based on Bootstrap or Tailwind

Technical Questions
1

Hi!

I was trying to understand if it was possible to create custom components with your product and use Tailwind CSS or Bootstrap in them?

Cheers

1 Like
2

Hi @ivoecpereira!

Yes, you can use custom components in Builder. Here is an example of how to integrate custom React components: https://www.builder.io/c/docs/custom-react-components, and here is a design system example: https://github.com/BuilderIO/builder/tree/master/examples/react-design-system. You should be able to use whatever css frameworks you like in your components, since those live in your codebase.

1 Like
3

Hi korey, I looked at your examples and neither one of them shows how to use a front-end framework list react-bootstrap in my components. I want to be able to use


 import { Col, Container, Form, Modal, Row } from "react-bootstrap";

in my custom components and structure the form into columns and rows using Col and Row. But it is not working.

4

Hello @AQuirky

5

Hi manish-sharma,

I got this working. I simply needed to add the bootstrap css file in the top level layout.

So here is my layout.tsx file…

import type { Metadata } from "next";
import "./globals.css";
import { StoreProvider } from "./StoreProvider";
import 'bootstrap/dist/css/bootstrap.min.css'; // Added to support bootstrap
import "./styles/sass/main.scss"; // Added to support other local styles

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children, ...rest
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <StoreProvider>
      <html lang="en">
        <body className="">
          {children}
        </body>
      </html>
    </StoreProvider>
  );
}

I suppose this should have been obvious, but I worked for hours to get this right. There are really no clues in the documentation or the examples on how to do this. The examples all seem to be material UI and NextJS. As you know I struggled mightily to get my CRA app running before finally giving up and creating a separate NextJS Azure web application to do one job: the builder.io visual editor support. This is really unfortunate because I had to duplicate reams of code from the CRA app to do this. But it is working now and working well. Unfortunately I cannot do the same thing by switching from Bootstrap to Material UI. I absolutely had to get Bootstrap working inside the visual editor. And now it is.