An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
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
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
This will install:
- bootstrap@next -- Bootstrap 5 Beta
- react -- React
- react-dom -- React DOM
- next -- NextJS
- sass -- SASS/SCSS preprocessor
We also need to set up our scripts in package.json
as follows:
{ // ... "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, //...}
2. Add your SCSS file
Next we need to add our SCSS folder and file:
$ mkdir scss$ touch scss/main.scss
And add the following content to scss/main.scss
:
// Import Bootstrap 5 Beta!@import "~bootstrap/scss/bootstrap.scss";
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
In the pages/index.js
file, add the following:
const IndexPage = () => { return "Hello world!";};export default IndexPage;
And in your pages/_app.js
file, add the following:
import "../scss/main.scss";function MyApp({ Component, pageProps }) { return <Component {...pageProps} />;}export default MyApp;
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!".
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;
This will render our new content within Bootstrap's fully-responsive mobile-first grid system:
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";
Which should give you something like this:
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
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To