Issue
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>
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.
Solution
Try using this attribute:
align-items: flex-end;
Also, use this site for flexbox help.
Answered By - Tayyab Answer Checked By - Candace Johnson (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.