Bootstrap

Bootstrap is one of the simplest and most used CSS libraries. This article will guide you on configuring a NextJs project with Bootstrap SCSS and JS files. Codesandbox Demo %[https://codesandbox.io/p/github/achingachris/next-bootstrap-template/draft/zealous-archimedes] GitHub: %[https://github.com/achingachris/next-bootstrap-template/tree/config-bootstrap-scss-and-js] Creating a Next.js Project If you already have a NextJS project, skip to the next step. On a terminal, run the following script to set up a NextJs project: npx create-next-app@latest After installation, run: npm run dev A successful setup will run on localhost:3000. ...

When creating a react application/website, most of the pages would be sharing the same content all over. For example the navigation bar and page footer. Instead of importing each component in every page to be rendered, it is much easier and faster to just create a layout component. This post will cover how to create a react app using Layout Components. Live demo: https://hjpx0v.csb.app/ Source Code to the demo: https://github.com/achingachris/react-layout-demo Here is how to do it: ...

This is an update to the previous article I wrote on React & Bootstrap Starter Template Why a Template? It’s because they save time. The process of setting up a project can be always frustrating and it’s always repetitive. That’s why I have a template for almost every stack I do. React & Bootstrap I love using Bootstrap because of the almost Zero configuration and the hustle of designing a responsive web layout is taken care of so I just focus on how a site would look. ...

Live Demo I love using Bootstrap because it saves time when trying to make a site responsive. After learning to use react, I started working on using bootstrap with react. It was tough at first, and after I got a hang of it, I quickly made a template that I’d reuse every time I want to use react and bootstrap altogether. Here is brief documentation and description of the template: Usage: Start using the template in these few simple steps: ...