Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 14, 2020 07:28 am GMT

Getting started with the new Bootstrap 5 Beta and NextJS

With the recent release of Bootstrap 5 Beta 1, now is a great time to dip your toes into working with the new major updates and getting your tools ready for when the final release drops.

Setting up your project

1. Set up your environment

Initialise a new npm package in your directory:

$ npm init -y
Enter fullscreen mode Exit fullscreen mode

The -y parameter tells npm to accept the default answers for all options.

Next, install our packages:

$ npm i bootstrap@next react react-dom next sass
Enter fullscreen mode Exit fullscreen mode

This will install:

We also need to set up our scripts in package.json as follows:

{  // ...  "scripts": {    "dev": "next dev",    "build": "next build",    "start": "next start"  },  //...}
Enter fullscreen mode Exit fullscreen mode

2. Add your SCSS file

Next we need to add our SCSS folder and file:

$ mkdir scss$ touch scss/main.scss
Enter fullscreen mode Exit fullscreen mode

And add the following content to scss/main.scss:

// Import Bootstrap 5 Beta!@import "~bootstrap/scss/bootstrap.scss";
Enter fullscreen mode Exit fullscreen mode

3. Set up your pages

We need to set up our usual index page, but also a custom App component that lives within the /pages directory. This is so we can ensure that Bootstrap 5 Beta is loaded across the entire NextJs app.

Create your pages folder, the index page and custom App component:

$ mkdir pages # Your pages folder$ touch pages/index.js # The index page$ touch pages/_app.js # The custom App component
Enter fullscreen mode Exit fullscreen mode

In the pages/index.js file, add the following:

const IndexPage = () => {  return "Hello world!";};export default IndexPage;
Enter fullscreen mode Exit fullscreen mode

And in your pages/_app.js file, add the following:

import "../scss/main.scss";function MyApp({ Component, pageProps }) {  return <Component {...pageProps} />;}export default MyApp;
Enter fullscreen mode Exit fullscreen mode

At this point you can run npm run dev in your terminal and browse to http://localhost:3000/ in your web browser and you'll be greeted with the universal dev message "Hello world!".

Screen Shot 2020-12-14 at 5.07.25 pm

Now for the fun part...

Customising Bootstrap

So we've got our project up and running, our dependencies are all installed and ready roll, and Bootstrap is being imported into our main SCSS file.

Let's add some structure and a little content to our index page:

const IndexPage = () => {  return (    <div className="container">      <div className="row">        <div className="col">          <h1 className="mt-4">Hello world!</h1>          <p>This is Bootstrap 5 Beta + NextJS</p>          <button className="btn btn-primary me-2">Read the docs!</button>          <button className="btn btn-outline-secondary">            or just get started          </button>        </div>      </div>    </div>  );};export default IndexPage;
Enter fullscreen mode Exit fullscreen mode

This will render our new content within Bootstrap's fully-responsive mobile-first grid system:

Screen Shot 2020-12-14 at 5.14.57 pm

We can then override Bootstrap's SCSS variables to build our our theme:

// Change the primary colour$primary: rgb(207, 44, 4);// Set the sans-serif font$font-family-sans-serif: Arial, sans-serif;// Maybe set a difference heading font family$headings-font-family: Georgia, serif;// Make headings bolder!$headings-font-weight: 700;// Thicken up our borders$border-width: 3px;// Remove the border-radius everywhere$border-radius: 0;// Import Bootstrap 5 Beta!@import "~bootstrap/scss/bootstrap.scss";
Enter fullscreen mode Exit fullscreen mode

Which should give you something like this:

Screen Shot 2020-12-14 at 5.45.18 pm

That should be enough to get your next Bootstrap 5 + NextJS web app kick started.

Now get out there and make something beautiful!


Original Link: https://dev.to/danwalsh/getting-started-with-the-new-bootstrap-5-beta-and-nextjs-51am

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To