I'm working on a React project with Bootstrap and I'm trying to align the contents of my second column to the bottom. However, everything I've tried so far hasn't been successful. I've seen others achieve this layout but for some reason, I can't change the alignment within the columns.
Specifically, I want the 'nav' element to be positioned at the bottom of its containing column, but it's currently appearing at the top left instead.
<div className="pageHeader">
<div className="container-fluid">
<div className="row">
<div className="col-md-3 col-sm-12">
<Logo currentPage='marine' />
</div>
<div className="col-md-9 col-sm-12 align-items-bottom">
<nav className="navigationBar">
<div className="navbarDiv">
<ul id="navmenu" class="navmenu">
{
headerObject.buttonDataArray.map((button, index) => {
return (
<NavButton key={index} buttonData={button} />
)
})
}
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>