Currently diving into the world of Bootstrap for my personal website, I'm encountering a challenge in aligning the content of my sidebar to the bottom. My quest for a solution led me through numerous threads without success.
<!--
wordsmith: <your name>
doc: index.html
summary: homepage for creative portfolio online
-->
<!DOCTYPE html>
<html lang='en'>
<head>
<!-- metadata -->
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!-- title -->
<title><your name></title>
<!-- stylesheets -->
<link href='css/bootstrap.css' rel='stylesheet'>
<link href='css/style.css' rel='stylesheet'>
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Anonymous+Pro:400,400i,700&display=swap" rel="stylesheet">
</head>
<body>
<div class='container-fluid'>
<div class='row min-vh-100'>
<div class='col sidebar text-end' style='background-color: #ffbd69'>
<img src='img/avatar.png'
alt='Avatar created using Picrew! Check out their cool characters here.'
class='avatar'>
<h1><your name></h1>
<h2>creative - building with code</h2>
<h3>designer / developer extraordinaire</h3>
</div>
<div class='col' style='background-color: #3dd5f3'>
<p>content</p>
</div>
</div>
</div>
</body>
</html>
UPDATE: After some exploration, I discovered that employing flexbox options was the key to getting my content alignment just right. Here's the CSS modification I made for the sidebar:
.sidebar {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: flex-end;
align-content: flex-end;
/* minimum width */
-ms-flex: 0 0 500px;
flex: 0 0 500px;
}
Kudos to @Tayyab for the invaluable insight.