Hello, I'm facing an issue with my HTML page that has a left vertical nav-bar. Despite my efforts, I can't seem to display content (text) in the center of the page as shown in the screenshot with the red oval.
I've attempted inserting text in various places like between every <div> tag on the page and at the beginning or end of the <body> section, but unfortunately, none of these methods have worked.
/* Custom styles */
.navbar {
height: 100vh;
/* Make navbar take full height of the viewport */
width: 250px;
/* Set a fixed width for the navbar */
}
.navbar-nav {
flex-direction: column;
/* Stack items vertically */
}
.nav-item {
width: 100%;
/* Make nav items take full width of the navbar */
}
.nav-link {
border: 1px solid black;
/* Add border to the nav items */
background-color: white;
/* Set background color for the nav items */
color: black;
/* Set text color for the nav items */
padding: 10px;
/* Add padding inside the nav items */
margin: 5px 0;
/* Add some space between the nav items */
border-radius: 0;
/* Remove border radius to match the screenshot */
}
/* Adjust the active link style */
.nav-link.active,
.nav-link:focus,
.nav-link:hover {
background-color: #e9ecef;
/* Change background color for active/hover/focus */
color: black;
/* Text color for active/hover/focus */
}
/* Remove default Bootstrap styles for active nav-link */
.nav-link.active {
border-color: #e9ecef;
background-color: #e9ecef;
}<!-- Include Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
<div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<span class="fs-4">Peeps</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
Home
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
Org Chart
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
OKRs
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
Performance
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
Onboarding
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
Learning & Development
</a>
</li>
</ul>
<hr>
<div class="dropdown">
<a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<strong>More</strong>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
<div class="container mt-3">
<div class="row">
<div class="col-12 mb-3">
<div class="p-3 box">
<h2>Welcome to Peeps!</h2>
</div>
</div>
<div class="col-md-6">
<div class="p-3 box">
<p>Recommendations on how to get started go here.</p>
</div>
</div>
<div class="col-md-6">
<div class="p-3 box">
<p>Some relevant graphs will go here. This will likely be around employee data, and would be customizable. --></p>
</div>
</div>
</div>
</div>
<!-- Include Bootstrap JS and its dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f89b978a9db8cad6cdd6cb">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>