Bootstrap - How do I move this column to the bottom? - css

Question

I'm trying to get this column to be aligned next to the Card box and have the project name right next to it. I'm trying to make it responsive so I feel that I need to have that column at the bottom of the jumbotron. How can I do that? (see picture). Thank you to anyone who replies, I'm still trying to learn bootstrap and CSS.
.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
voluptatum doloribus aspernatur dolorem! Ratione rerum, in obcaecati,
aliquam est dolor. Eos aliquam pariatur accusantium animi, reiciendis
placeat ducimus beatae sunt reprehenderit numquam unde consequuntur sint
asperiores, quasi saepe vero officiis laudantium. Doloribus possimus
quidem reprehenderit aliquid nemo dolorum perspiciatis laudantium
expedita numquam omnis! Necessitatibus consequuntur debitis minus vel
voluptate minima fugit numquam voluptatibus assumenda ab, omnis quasi
ipsam possimus aut suscipit, temporibus odio quam sit, nemo sed sapiente
facilis corrupti blanditiis. Debitis, quod? Quo, impedit nam nihil
cumque vel magnam facilis accusantium distinctio. Doloremque consequatur
aliquid id? Vero repudiandae delectus laboriosam mollitia provident
odio, numquam earum sequi deleniti recusandae nobis expedita quisquam
nihil ipsa, nam temporibus asperiores. Distinctio ratione ab minima
optio, in numquam perspiciatis asperiores velit perferendis pariatur
voluptate deleniti, veritatis enim ullam nam reprehenderit ipsam sed!
Temporibus molestiae accusamus impedit facilis amet in sed quae facere
sequi repellat quas consequatur aperiam ipsam mollitia, molestias, sit
delectus laudantium aspernatur! Fuga fugit veritatis magnam similique
laboriosam, enim sequi esse quibusdam vero sit laudantium. Repellendus
et, porro! Possimus recusandae doloribus quae unde repellendus aperiam
eligendi qui maiores tempore! Nesciunt numquam quis nihil, quam sequi
cumque quo, natus amet veniam excepturi, repellendus ipsum iure
doloremque? Nostrum cupiditate cum necessitatibus officiis harum
adipisci cumque vero accusamus autem provident quas, ex assumenda
deserunt a fugit quibusdam consequuntur error ratione placeat
perspiciatis fugiat at! Nihil minima fugiat nostrum odio nulla a,
placeat ipsa magnam ad blanditiis illo, aliquam id earum ratione vitae
consectetur, aspernatur adipisci soluta ut reiciendis quisquam
laboriosam. Similique iusto dolor dignissimos architecto animi officia,
facere quidem, sapiente tempore atque sed quisquam! Odio, nemo excepturi
quasi exercitationem. Ipsa saepe quod reiciendis perferendis rerum
officia vero delectus rem placeat commodi vel qui ab nisi doloremque
esse accusantium, inventore similique! Culpa, alias tempora dolorum
nulla veniam eveniet, ea, recusandae omnis quas cupiditate eaque ullam
beatae labore quaerat repellendus explicabo illum impedit tempore
adipisci praesentium consequatur in! Perspiciatis culpa ullam totam
consequatur unde. Harum itaque aliquid, esse fugit ipsam ipsum qui
dolore natus nulla temporibus, suscipit velit omnis. Voluptates labore
impedit consequuntur vel enim sunt iste, neque inventore explicabo et
illum expedita sint. Porro minus omnis enim, quo reprehenderit facere
iusto corporis vero, perspiciatis, suscipit perferendis commodi
accusantium laboriosam aliquam consectetur non soluta voluptatibus
repellat nostrum magnam ullam aliquid nisi unde. Sint, porro velit,
eligendi ea suscipit qui tenetur quos esse. Aspernatur, autem ullam
fugiat quod magni, vitae porro perspiciatis delectus. Aperiam, quos,
maiores? Laudantium, optio omnis perspiciatis obcaecati itaque excepturi
voluptas, culpa atque accusantium veritatis odio dolores saepe illo
incidunt aut eaque modi nihil laborum. Tempora eum placeat omnis
reiciendis cupiditate harum, odio voluptatem numquam corrupti illum
minus dignissimos cum optio. Autem libero cupiditate qui id obcaecati
repudiandae quasi, veniam temporibus ut facilis voluptatibus hic quod
tempore iste eligendi labore et, porro dolore. Voluptates sit, ullam
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>

Answer 1

So the issue was, that the p element was placed inside a totally different row.
You need to imagine it kinda like this.
-------------------------------
[row-1]
-------------------------------
| [row-2]
|
[card] | [text]
|
-------------------------------
So what I did now is, I moved our infamous p from the first row to the second row, which consists out of two columns and put it in the second one. So now its next to the card and above the text.
<div class="backgroundInformation">
<div class="container-fluid">
<div class="row" style=" height: 100px">
<div class="jumbotron col ">
<!-- style="top: 4rem; right: -20em; font-size: 22px;" -->
<!-- position-relative offset-md-8 -->
</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">
<div class="block" style="background-color: transparent;">
<p class="col-6-md whiteColorText " >
{{projectName}}
</p>
</div>
<div style="background-color: #fff;">
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
voluptatum doloribus aspernatur dolorem! Ratione rerum, in obcaecati,
aliquam est dolor. Eos aliquam pariatur accusantium animi, reiciendis
placeat ducimus beatae sunt reprehenderit numquam unde consequuntur sint
asperiores, quasi saepe vero officiis laudantium. Doloribus possimus
quidem reprehenderit aliquid nemo dolorum perspiciatis laudantium
expedita numquam omnis! Necessitatibus consequuntur debitis minus vel
voluptate minima fugit numquam voluptatibus assumenda ab, omnis quasi
ipsam possimus aut suscipit, temporibus odio quam sit, nemo sed sapiente
facilis corrupti blanditiis. Debitis, quod? Quo, impedit nam nihil
cumque vel magnam facilis accusantium distinctio. Doloremque consequatur
aliquid id? Vero repudiandae delectus laboriosam mollitia provident
odio, numquam earum sequi deleniti recusandae nobis expedita quisquam
nihil ipsa, nam temporibus asperiores. Distinctio ratione ab minima
optio, in numquam perspiciatis asperiores velit perferendis pariatur
voluptate deleniti, veritatis enim ullam nam reprehenderit ipsam sed!
Temporibus molestiae accusamus impedit facilis amet in sed quae facere
sequi repellat quas consequatur aperiam ipsam mollitia, molestias, sit
delectus laudantium aspernatur! Fuga fugit veritatis magnam similique
laboriosam, enim sequi esse quibusdam vero sit laudantium. Repellendus
et, porro! Possimus recusandae doloribus quae unde repellendus aperiam
eligendi qui maiores tempore! Nesciunt numquam quis nihil, quam sequi
cumque quo, natus amet veniam excepturi, repellendus ipsum iure
doloremque? Nostrum cupiditate cum necessitatibus officiis harum
adipisci cumque vero accusamus autem provident quas, ex assumenda
deserunt a fugit quibusdam consequuntur error ratione placeat
perspiciatis fugiat at! Nihil minima fugiat nostrum odio nulla a,
placeat ipsa magnam ad blanditiis illo, aliquam id earum ratione vitae
consectetur, aspernatur adipisci soluta ut reiciendis quisquam
laboriosam. Similique iusto dolor dignissimos architecto animi officia,
facere quidem, sapiente tempore atque sed quisquam! Odio, nemo excepturi
quasi exercitationem. Ipsa saepe quod reiciendis perferendis rerum
officia vero delectus rem placeat commodi vel qui ab nisi doloremque
esse accusantium, inventore similique! Culpa, alias tempora dolorum
nulla veniam eveniet, ea, recusandae omnis quas cupiditate eaque ullam
beatae labore quaerat repellendus explicabo illum impedit tempore
adipisci praesentium consequatur in! Perspiciatis culpa ullam totam
consequatur unde. Harum itaque aliquid, esse fugit ipsam ipsum qui
dolore natus nulla temporibus, suscipit velit omnis. Voluptates labore
impedit consequuntur vel enim sunt iste, neque inventore explicabo et
illum expedita sint. Porro minus omnis enim, quo reprehenderit facere
iusto corporis vero, perspiciatis, suscipit perferendis commodi
accusantium laboriosam aliquam consectetur non soluta voluptatibus
repellat nostrum magnam ullam aliquid nisi unde. Sint, porro velit,
eligendi ea suscipit qui tenetur quos esse. Aspernatur, autem ullam
fugiat quod magni, vitae porro perspiciatis delectus. Aperiam, quos,
maiores? Laudantium, optio omnis perspiciatis obcaecati itaque excepturi
voluptas, culpa atque accusantium veritatis odio dolores saepe illo
incidunt aut eaque modi nihil laborum. Tempora eum placeat omnis
reiciendis cupiditate harum, odio voluptatem numquam corrupti illum
minus dignissimos cum optio. Autem libero cupiditate qui id obcaecati
repudiandae quasi, veniam temporibus ut facilis voluptatibus hic quod
tempore iste eligendi labore et, porro dolore. Voluptates sit, ullam
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
</div>
</main>
</div>
</div>
</div>
You probably still got to fiddle a little with your CSS to make it good looking, but it's now "physically" next to your card element.
You maybe add display: block; as well as some margin or padding to the p element.