Can I press circles to the bottom row / background? Without changing .bootom-blank-icon {position: absolute} and without adding to bg-head {position: relative}

.bg-head { background-image: url(https://k60.kn3.net/taringa/C/5/D/B/1/3/VCLR/A17.jpg); height: 900px; } .bootom-blank-icon { bottom: 70px; position: absolute; text-align: center; display: inline-block; font-size: 34pt; z-index: 100; width: 100%; } .icon-circle { color: #fff; border: 2px #fff solid; display: inline-block; border-radius: 100%; padding-left: 5px; padding-right: 5px; padding-top: 6px; padding-bottom: 9px; width: 70px; height: 70px; margin-left: 15px; background-color: #fff; } 
 <div class="container-fluid"> <div class="row bg-head"> <div class="bootom-blank-icon"> <a class="icon-circle" href="/"></a> <a class="icon-circle" href="/"></a> <a class="icon-circle" href="/"></a> <a class="icon-circle" href="/"></a> </div> </div> </div>

codeopen

    1 answer 1

    It is possible so:

     .row { display: flex; flex-direction: column; justify-content: flex-end; }

    or so:

     .row { display: grid; align-items: end; }

    or on crutches (89px = height + padding + border):

     .bootom-blank-icon::before { content: ""; display: block; min-height: 100%; } .bootom-blank-icon { margin-top: -89px; }
    • the first 2 examples do not work with the bustrapov row, and the third method does not work, because I don’t know the height of the background (rubber layout) - Egor Tregubenko
    • codepen.io/Sinecuraweb/pen/eVYLMR here the bootstrap is connected - Egor Tregubenko
    • to the selector .bg-head you can set? - Alexander
    • nope if it turns out, reset the working example with corrections - Egor Tregubenko