# Using Bootstrap in Next.js + free starter I'll be completely honest with you. I haven't used Bootstrap in a while. But that doesn't take away that it's still widely used by a lot of people. A loyal reader Neeraj asked me to write down a tutorial on integrating Bootstrap with Next.js (Thank you, Neeraj, for this request ❤️). So today, we'll have a look at how you can set up Bootstrap to work in a Next.js project. ## Adding Bootstrap to Next.js Let's start from scratch so everyone can follow along. First, we'll create a new Next.js application, which is as simple as running the following command: ```bash npx create-next-app ``` > All you have to do is pick a name 🥳 Then let's add the Bootstrap NPM package. By loading it with NPM, we can more easily update it later on. ```bash npm install bootstrap ``` To load Bootstrap in our project, we only need to load the stylesheet in our `_app.js` file like so: ```jsx import 'bootstrap/dist/css/bootstrap.css'; function MyApp({ Component, pageProps }) { return ; } export default MyApp; ``` Be aware this will load the complete bootstrap file! Unfortunately, there is no super-easy way to purge Bootstrap as Tailwind has. ## Styling a basic Bootstrap template in Next.js Let's put it to the test and create a simple template. Open up your `index.js` page and modify it so it looks like this: ```jsx import Head from 'next/head'; export default function Home() { return (
Create Next App

Next.js + Bootstrap ❤️

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

); } ``` This should render a Bootstrap hero header: ![Hero header Bootstrap in Next.js](https://cdn.hashnode.com/res/hashnode/image/upload/v1633859589234/si3KcxQtF.png) It works, yes 🎉. But does it also work for components? Let's create a `components` directory and add a file called `Header.js`. ```jsx const Header = () => { return (
LOGO
); }; export default Header; ``` And let's create another component called `Footer.js`. ```jsx const Footer = () => { return (
); }; export default Footer; ``` If we head back to our `index.js` we can import these two components to see what happens. ```jsx import Header from '../components/Header'; import Footer from '../components/Footer'; export default function Home() { return (
); } ``` Let's refresh our page and see what we have. ![Next.js Bootstrap starter template](https://cdn.hashnode.com/res/hashnode/image/upload/v1633859923556/eci-rOrPe.png) And there you go, a super-easy way to include Bootstrap in your Next.js application. You can find the complete starter code on [GitHub](https://github.com/rebelchris/next-bootstrap). ### Thank you for reading, and let's connect! Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)