DEV Community

loading...
Cover image for Add Bootstrap to Next.js App

Add Bootstrap to Next.js App

theallegrarr profile image Nurudeen Amedu Updated on ・3 min read

If you are familiar with bootstrap, you can agree that it is one of the fastest and easiest ways of developing the frontend of a web application, as it saves time on styling and responsive adaptation.

In this article, I will go over how you can configure your Next JS application to use bootstrap.

First set up your next js application

yarn create next-app next-strap
Enter fullscreen mode Exit fullscreen mode

Next we install the desired packages

yarn add @zeit/next-css @zeit/next-less @zeit/next-sass next-images bootstrap react-bootstrap 
Enter fullscreen mode Exit fullscreen mode

These packages will allow us configure image, css, less and sass support for our next app, bootstrap and react-bootstrap are however needed to use bootstrap in our app.

To read more on react-bootstrap, visit React Bootstrap.

Now we create our next config file which will our asset support packages, create this file in the root of your app named "next.config.js"

Alt Text

Fill it with the code below;

const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
const withLess = require('@zeit/next-less')
const withCSS = require('@zeit/next-css')

module.exports = withCSS(withLess(withImages(withSass({
  env: {
    ANY_ENV_KEY: "ANY_ENV_VARIABLE"
  }
}))));
Enter fullscreen mode Exit fullscreen mode

Inside our config, I added an env object which will contain any environment variable you wish to include in your Next JS app.

Now add the following imports to the pages/_app.js file

import 'bootstrap/dist/css/bootstrap.min.css'
Enter fullscreen mode Exit fullscreen mode

New _app.js should look like

import '../styles/globals.css'
import 'bootstrap/dist/css/bootstrap.min.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp
Enter fullscreen mode Exit fullscreen mode

In our pages/index file, I'll clear the content leaving only the head;

import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>


    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

I will proceed to attach a bootstrap component to this page, go over to the React Bootstrap Carousel Component.

Copy the first sample code into your pages/index file, also import the Carousel from react-bootstrap, thus making the code;

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Carousel } from 'react-bootstrap'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Carousel>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="holder.js/800x400?text=First slide&bg=373940"
            alt="First slide"
          />
          <Carousel.Caption>
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="holder.js/800x400?text=Second slide&bg=282c34"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="holder.js/800x400?text=Third slide&bg=20232a"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    </div>
  )
}

Enter fullscreen mode Exit fullscreen mode

Now add some background image for your carousel slider, I'll be using a placeholder; https://placehold.it/800x400?text=800x400 for my background, feel free to use whatever you prefer.

My final code would look like;

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Carousel } from 'react-bootstrap'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Carousel>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="https://placehold.it/800x400?text=800x400"
            alt="First slide"
          />
          <Carousel.Caption>
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="https://placehold.it/800x400?text=800x400"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="https://placehold.it/800x400?text=800x400"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    </div>
  )
}

Enter fullscreen mode Exit fullscreen mode

Now you can run your app by typing yarn run dev in your terminal, you should get the below behavior on your app homepage.

Alt Text

If you find this article helpful, you can also checkout other Next JS videos on Youtube or the Full Stack Next JS Course on Udemy

Discussion

pic
Editor guide