In this Next.js app I’ve created using create-next-app, we’ll start by installing the latest version of Bootstrap using npm, npm i bootstrap@latest
. Then in the layout
file, it would be _app.js
if you’re using the pages directory, import the bootstrap styling sheet, import bootstrap/dist/css/bootstrap.min.css';
.
Now in the page.js
file, index.js
if you're using the pages directory, we can start using Bootstrap. I’ll remove all of the template code and paste in a simple header and paragraph.
Now start the dev server and the app is running using Bootstrap!
Transcript
Bootstrap is a widely popular front-end toolkit used for styling websites. It's so popular because of its easy-to-implement grid system, allowing you to place elements exactly where you want them. Along with the grid system, it allows you to easily create responsive designs using its predetermined infixes. Today, I'll show you how to install and start using Bootstrap in an XGS application. I've got this Next.js app I've created using next create app.
We'll start by installing the latest version of Bootstrap using npm, npm I bootstrap at latest. Then in the layout file, it would be underscore app.js if you're using the pages directory, and we'll import the bootstrap styling sheet. Then back in page.js or index.js if you're using the pages directory we can start developing using bootstrap. I'll start by removing this boilerplate and I will paste in some simple code using bootstrap. Now let's start our server, npm run dev, and Head over to our local host.
Now with Bootstrap installed and working, you can move on to creating your website.