INTRODUCTION
I am in the process of developing a website to exhibit my past work in blockchain and cybersecurity projects. Using bootstrap v5.1.3, I have successfully created two pages on my website so far, despite not being a seasoned front-end developer.
Currently, I am crafting the detailed description for one of my projects and plan to integrate images into it at a later stage.
CHALLENGE
The main issue I am grappling with is the appearance of a horizontal bar if the page contains a lot of paragraphs. I am unsure of how to resolve this issue and prevent the horizontal bar from showing up.
My goal is to ensure that all paragraphs are responsive and only visible within the width of the screen viewport, without overflowing and creating the horizontal bar.
Refer to the image below for a clearer illustration.
IMAGE
https://i.sstatic.net/kQlsB.png
INQUIRY
Is there a way to address this problem using only bootstrap v5.1.3?
WEBPAGE SNIPPET
/* test.css */
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Hack, monospace !important;
background-color: #0f0f0f;
}
body {
display: flex!important;
}
.wrapper {
background-color: #0f0f0f;
}
.text-center.h1 {
color: #F4364C !important;
font-size: 4vw !important;
}
.h6 {
color: #F4364C !important;
font-size: 1.25vw !important;
opacity: 0.5 !important;
}<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Joshua">
<title>Project 1 | XXX XXX</title>
<!-- hack fonts -->
<link href='https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf3faf8f0b6fdf4f5efdba8b5a8b5ab">[email protected]</a>/build/web/hack.css' rel='stylesheet' >
<!-- stylesheet -->
<link href='test.css' rel='stylesheet'>
<!-- bootstrap-5.1.3 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a2825253e393e382b3a0a7f647b6479">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- bootstrap-5.1.3 script bundle with popper -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a2825253e393e382b3a0a7f647b6479">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex flex-column min-vh-100 min-vw-100 wrapper">
<!-- Project Title -->
<div class="container-fluid my-auto">
<p class="text-center h1"><span>Astronomy Star Registry</span></p>
</div>
<div class="container-fluid my-auto">
<p class="h6">
... (text repeats) ...
</p>
<p class="h6">
... (text repeats)...
</p>
... (more paragraphs) ...
</div>
</div>
</body>
</html>