Bootstrapping Products

Integrating Frontends

Step 1: Choose Bootstrap Imports

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

Step 2: Create Import Paths

{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"baseUrl": "./",
"paths": {
"@components/*": ["components/*"]
}
}
}

Step 3: Create Your Header

import Head from 'next/head'

function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>Hello world!</p>
</div>
)
}

export default IndexPage

Step 4: Build Your Navbar

Scaffolding Applications

Step 5: Layout Components

import React from "react";import Image from "next/image";
function Example() {
return (<> <section id="interest"> <div className="container-fluid"> <div className="row"> <div className="col-xl-6"> <Image src="/" alt="Image" width={1000} height={1000} loading="lazy" className="img-fluid" /> </div> <div className="col-xl-6"> <p>Hello</p> </div> </div> </div> </section></>);}export default Example;

Step 6: Typesetting

Step 7: Additional Considerations

Thanks for Reading, Keep Constructing!

Full Stack Software Engineer — React, JavaScript, Node, NoSQL, Kubernetes & Cloud Native experiences built to scale. https://collectedview.io

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store