How to align content of Bootstrap Column to the bottom of the column?-CodePudding

I am currently learning bootstrap for my personal website, and I am having difficulty with aligning the content of my sidebar to the bottom. I have looked through various threads to find more information, but have been unable to find the correct solution.

<!--
    author: elia deppe
    file: index.html
    description: index page for portfolio website
-->

<!DOCTYPE html>
<html lang='en'>
<head>
    <!-- metadata -->
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <!-- title -->
    <title>elia deppe</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'>
            <!-- Picrewの「character」でつくったよ！ https://picrew.me/share?cd=vcQauzSoob #Picrew #character -->
            <img src='img/avatar.png'
                 alt='Picrewの「character」でつくったよ！ https://picrew.me/share?cd=vcQauzSoob #Picrew #character'
                 class='avatar'>
            <h1>elia deppe</h1>
            <h2>teacher - code in the schools</h2>
            <h3>software / web / app developer</h3>
        </div>
        <div class='col' style='background-color: #3dd5f3'>
            <p>content</p>
        </div>
    </div>
</div>
</body>
</html>

Current Render

What I Want

EDIT: I found that I needed to utilize flex box options in order to properly format my content. I set my CSS for the sidebar as follows:

.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;
}

Thanks to @Tayyab for the helpful site.

CodePudding user response：

Try using this attribute:

align-items: flex-end;

Also, use this site for flexbox help.

https://flexbox.help/