CODEWITHSUNDEEP
htmltwitter-bootstrap
Nominalista
Nominalista

Reputation: 4838

Align div to bottom of the page in bootstrap

I tried to use methods from stack questions, but nothing works for me, despite project is very simple. 

<div class="fluid-container">
    <div id="app-row" class="row">
        <div id="app" class="col-xs-5">
            <div class="top-navbar">
            Top
            </div>
            <div class="bottom-navbar">
            Bottom
            </div>
        </div>
        <div id="map-container" class="col-xs-7">
            <div id="map"></div>
        </div>
    </div>
</div>

style.css

.fluid-container {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
    width: 100%;
}

.row {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
    width: 100%;
}

html, body, .fluid-container, #app-row, #map-container {
    height: 100%
}

#app-row {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
}

#map-container {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
}

#map {
    height: 100%;
    width: 100%;
}

What I want to achieve:

Bottom is bottom of the page and Top is on the top of the page.

Upvotes: 10

Views: 26864

Answers (3)

letthefireflieslive
letthefireflieslive

Reputation: 12694

You can do this using bootstrap 4 flexbox. 

<div class="d-flex flex-column justify-content-between">
   <div></div>
   <div>bottom content</div>
</div>

Upvotes: 1

SquarePeg
SquarePeg

Reputation: 1781

Try using navbar-fixed-bottom:

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
         My footer
    </div>
</div>

Upvotes: 9

Core972
Core972

Reputation: 4114

Just use position:fixedon both div.

Here a fiddle

Upvotes: 2

Related Questions