Bootstrap might sound like a blast from the past but it actually integrates nicely with the Next.js App Router.
Setup is easy. You just install bootstrap for the CSS and react-boostrap for the component library that uses the CSS. Then, you replace your global CSS import with bootstrap and can start using Bootstrap's components wherever you'd like. No provider needed!
You'll also see how they've been evolving with the times and use Tailwind-esque class names, and how you can use react-hook-form to control the nested form components that Boostrap provides.
Transcript
Here's a blast from the past for you, Bootstrap. I know, don't skip away. No, seriously, actually, Bootstrap with Next.js App Writer works really well. It's really pretty. I got to tell you, just stick with me through the end on this one.
You're actually going to be impressed with how nicely Bootstrap and React Bootstrap integrate with the Next.js App Writer. Let's give it a go. All right, we'll create our Bootstrap test application. Bootstrap is its own CSS library, so not going to use Tailwind in addition to Bootstrap. Bootstrap actually has Tailwind style layout primitives baked into it.
It is a fantastic thing. If you don't know why I'm saying this about Bootstrap, Bootstrap has been around, boy, since the first days of Twitter. It was actually the Twitter design library. It was just a CSS file that you'd use that had some really nice formatting for UI components. And then for each one of the libraries that came out, you'd get various adapters to Bootstrap.
So in this case, we've got React Bootstrap. So it just, I think people discount it because it's been around for so long, but it's actually really good. All right, let's keep going. All right. We are of course going to use the app writer.
Other than that, we're good. All right, let's bring it up in VS Code. All right, let's bring in our libraries. That's just literally Bootstrap and React Bootstrap. Bootstrap is a CSS, React Bootstrap are the React components that then use that CSS.
Okay, let's go into our layout. We'll place our globals with Bootstrap. Ta-da! And then for dark mode, I'll go over here to our HTML tag. I'll add that the bootstrap or BS theme is dark and that's it for setup.
There's no providers, there's nothing. How cool is that? Alright let's bring our blog infrastructure. Again that includes the blog file that has our server actions as well as the types that define our blog. All right, now we want to show our blog.
So let's go over here to our app and create a new file called blog.tsx. This is not going to be a client component, it doesn't need to be. It's not actually going to bring in any components at all. It's just going to go and use H1 to go and format the title and then a div to format the text. We are going to use MB3, so it has shorthand, like in this case, margin-bottom-3, the same we see with Tailwind.
Again, Bootstrap has been evolving with the times and it is quite nice. Now over in our page, we are going to see some Bootstrap layout components. We're going to bring in a container. That's the container for page, as well as row and col. Bootstrap has the original 12 column layout and still maintains that.
So the container is going to set up that 12 column layout. We're going to have a row and then two columns. The columns of the small size, XS, are going to have a size of six. 12 divided by six is two, thus 50%. So that's gonna give us a two-sided layout.
Let's take a look. And look how fast that is. That came up just like that. It's so easy. All right, now let's try out a form.
So it doesn't have a forms manager built in. So we're gonna use React Quick Form. I'll bring it up again while we're here. All right, let's go create our blog form. This is going to be a client component because it's interactive.
We're going to bring in use form and controller from React.Form, and then for components, we're going to bring in Form as well as Button. So Form is gonna give us a whole bunch of nested components like Form.Group, Label, and Control, and we'll use those to create the nice form layout. We'll use the controller just like we have in other React Hook form examples to connect the bootstrap components with the hook. Other than that, it's pretty standard form. We're going to use a button, type submit.
All right, let's give it a go. Go over here to our page, we'll bring in our blog form, put in the second column, Hit refresh. Nice, good looking. It's got nice little active on there, so it's glowing when it's active. Really nice, okay.
How easy is that? I gotta tell you, Bootstrap is gonna be one of the shortest videos in this series and it's not because it's ha ha ha don't use Bootstrap with Next.js. It's actually whoa you actually really can use Bootstrap with Next.js and it's really quite good. So if somebody says to you we're using Bootstrap why aren't you? Don't laugh at them.
Now you see. Actually, Bootstrap is really freaking cool and you should try it out. I've written a bunch of different sites on Bootstrap back in the day and I gotta tell you, I kind of look at it back on it fondly because those were honestly simpler days and sometimes something like this can be just about what you need. So check it out. Plus, there are a lot of optional themes for Bootstrap.
They can make it look like pretty much anything you want. So check it out.
Here's a blast from the past for you, Bootstrap. I know, don't skip away. No, seriously, actually, Bootstrap with Next.js App Writer works really well. It's really pretty. I got to tell you, just stick with me through the end on this one.
You're actually going to be impressed with how nicely Bootstrap and React Bootstrap integrate with the Next.js App Writer. Let's give it a go. All right, we'll create our Bootstrap test application. Bootstrap is its own CSS library, so not going to use Tailwind in addition to Bootstrap. Bootstrap actually has Tailwind style layout primitives baked into it.
It is a fantastic thing. If you don't know why I'm saying this about Bootstrap, Bootstrap has been around, boy, since the first days of Twitter. It was actually the Twitter design library. It was just a CSS file that you'd use that had some really nice formatting for UI components. And then for each one of the libraries that came out, you'd get various adapters to Bootstrap.
So in this case, we've got React Bootstrap. So it just, I think people discount it because it's been around for so long, but it's actually really good. All right, let's keep going. All right. We are of course going to use the app writer.
Other than that, we're good. All right, let's bring it up in VS Code. All right, let's bring in our libraries. That's just literally Bootstrap and React Bootstrap. Bootstrap is a CSS, React Bootstrap are the React components that then use that CSS.
Okay, let's go into our layout. We'll place our globals with Bootstrap. Ta-da! And then for dark mode, I'll go over here to our HTML tag. I'll add that the bootstrap or BS theme is dark and that's it for setup.
There's no providers, there's nothing. How cool is that? Alright let's bring our blog infrastructure. Again that includes the blog file that has our server actions as well as the types that define our blog. All right, now we want to show our blog.
So let's go over here to our app and create a new file called blog.tsx. This is not going to be a client component, it doesn't need to be. It's not actually going to bring in any components at all. It's just going to go and use H1 to go and format the title and then a div to format the text. We are going to use MB3, so it has shorthand, like in this case, margin-bottom-3, the same we see with Tailwind.
Again, Bootstrap has been evolving with the times and it is quite nice. Now over in our page, we are going to see some Bootstrap layout components. We're going to bring in a container. That's the container for page, as well as row and col. Bootstrap has the original 12 column layout and still maintains that.
So the container is going to set up that 12 column layout. We're going to have a row and then two columns. The columns of the small size, XS, are going to have a size of six. 12 divided by six is two, thus 50%. So that's gonna give us a two-sided layout.
Let's take a look. And look how fast that is. That came up just like that. It's so easy. All right, now let's try out a form.
So it doesn't have a forms manager built in. So we're gonna use React Quick Form. I'll bring it up again while we're here. All right, let's go create our blog form. This is going to be a client component because it's interactive.
We're going to bring in use form and controller from React.Form, and then for components, we're going to bring in Form as well as Button. So Form is gonna give us a whole bunch of nested components like Form.Group, Label, and Control, and we'll use those to create the nice form layout. We'll use the controller just like we have in other React Hook form examples to connect the bootstrap components with the hook. Other than that, it's pretty standard form. We're going to use a button, type submit.
All right, let's give it a go. Go over here to our page, we'll bring in our blog form, put in the second column, Hit refresh. Nice, good looking. It's got nice little active on there, so it's glowing when it's active. Really nice, okay.
How easy is that? I gotta tell you, Bootstrap is gonna be one of the shortest videos in this series and it's not because it's ha ha ha don't use Bootstrap with Next.js. It's actually whoa you actually really can use Bootstrap with Next.js and it's really quite good. So if somebody says to you we're using Bootstrap why aren't you? Don't laugh at them.
Now you see. Actually, Bootstrap is really freaking cool and you should try it out. I've written a bunch of different sites on Bootstrap back in the day and I gotta tell you, I kind of look at it back on it fondly because those were honestly simpler days and sometimes something like this can be just about what you need. So check it out. Plus, there are a lot of optional themes for Bootstrap.
They can make it look like pretty much anything you want. So check it out.
Jack Herrington