How to align contents inside a column in Bootstrap?

September 19, 2022

I’m using React with Bootstrap. I want to lay the contents of the second the column on the bottom of column. But what i’ve tried so far is not seem to be working. What’s the problem here ? I saw people doing the same thing and get the results but i can’t change the alignment of the contents inside columns.

Basically i want ‘nav’ element to lay on the bottom of the column it’s being inside of. But it keeps laying on the top left of the column.

<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>

>Solution :

Try "d-flex align-items-end" class

<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 d-flex align-items-end">
                <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>