I'm trying to align this column next to the Card box and have the project name right beside it. To ensure responsiveness, I believe I need to place that column at the bottom of the jumbotron. How can I achieve this? (refer to the image). I appreciate any help or guidance as I continue to explore Bootstrap and CSS. https://i.sstatic.net/6Kr1i.png
.jumbotron {
background-image: url("src\app\assets\image.jpg");
background-size: cover;
height: 100%;
border-radius: 0;
}
.whiteColorText {
color: white;
position: absolute;
}
aside .box {
position: relative;
}
aside .card {
position: absolute;
top: 0;
transform: translateY(-100px);
left: 0;
right: 0;
}<div class="backgroundInformation">
<div class="container-fluid">
<div class="row">
<div class="jumbotron col ">
<!-- style="top: 4rem; right: -20em; font-size: 22px;" -->
<!-- position-relative offset-md-8 -->
<p
class="col-6-md whiteColorText "
>
{{projectName}}
</p>
</div>
</div>
<div class="row">
<aside class="col-4">
<div class="box">
<div class="card shadow p-3 mb-5 bg-white rounded">
<img
class="card-img-top"
src="https://picsum.photos/600/200"
alt="Card image cap"
/>
<div class="card-body">
<div class="col">
<h5 class="card-title"><b> About</b></h5>
<p class="card-text">
{{ projectDescription }}
</p>
<h5 class="card-title"><b> Team Members </b></h5>
test1 <br />
test2 <br />
test3
<h5 class="card-title"><b> Interests</b></h5>
<!--
<ul *ngFor="let item of interests">
{{
item
}}
</ul> -->
<ul *ngFor="let item of interests">
<div class="centerObjects">
<ng-container *ngIf="item === 'Music'">
<mat-icon aria-hidden="false"> music_note </mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Technology'">
<mat-icon aria-hidden="false"> desktop_mac</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Sports'">
<mat-icon aria-hidden="false"> sports_football</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Art'">
<mat-icon aria-hidden="false"> create </mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Fashion'">
<mat-icon aria-hidden="false"> checkroom </mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Gaming'">
<mat-icon aria-hidden="false">
sports_esports
</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Education'">
<mat-icon aria-hidden="false"> menu_book</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Business'">
<mat-icon aria-hidden="false"> business</mat-icon>
{{ item }}
</ng-container>
<span> </span>
</div>
</ul>
</div>
</div>
</div>
</div>
</aside>
<main class="col">
itaque quae, minus error blanditiis corrupti optio ullam quidem
necessitatibus. Nulla eveniet unde quod deserunt cupiditate expedita
ducimus reiciendis doloribus, quae officia iusto quo, totam! Quae et
eius quisquam. Vitae quaerat, odit harum nam expedita rem mollitia et,
nihil rerum eos aut quas nostrum adipisci! Laborum nesciunt, ad saepe
... [truncated for brevity] ...
commodi a amet. Dolorum laboriosam harum quod cupiditate in rem
veritatis saepe tempore, cumque commodi deleniti voluptate, cum quasi
nesciunt incidunt temporibus expedita aut, quisquam omnis facilis odit
sit assumenda. Labore impedit cumque eveniet quae, provident velit, eos,
rem enim esse, natus nisi voluptatum non in. Adipisci sit excepturi,
aperiam. Mollitia assumenda repudiandae ipsam saepe, maxime rerum,
fugiat! Ducimus, beatae ex aliquid! Earum ab voluptas eligendi hic
</main>
</div>
</div>
</div>