locked
footer overlaying the above div in resposive mode in bootstrap 4 RRS feed

  • Question

  • User1398839915 posted

    Hi,

    I am using <g class="gr_ gr_60 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="60" data-gr-id="60">bootstrap</g> <g class="gr_ gr_65 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="65" data-gr-id="65">4 <g class="gr_ gr_73 gr-alert gr_gramm gr_inline_cards gr_run_anim Style replaceWithoutSep" id="73" data-gr-id="73">.</g></g><g class="gr_ gr_73 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Style replaceWithoutSep" id="73" data-gr-id="73">I</g> want the footer to be always pushed to the bottom of the screen/page even if there is no content. 

    I <g class="gr_ gr_252 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="252" data-gr-id="252">dont</g> want a sticky footer. 

    With the code below I could push the footer to the bottom of the screen but in <g class="gr_ gr_327 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" id="327" data-gr-id="327">responsive</g> <g class="gr_ gr_335 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="335" data-gr-id="335">mode</g> it is overlaying the above div.

    body, html {
    height: 100%;
    margin: 0;
    font-family:Lato, Arial, Helvetica, sans-serif;
    }


    .fixed-bottom { ; margin: auto; width: 100%; right: 0; bottom: 0; left: 0; z-index: 1030; }
    <body>
    <nav>navbar code</nav>
    <div class="container-fluid">Maincontent</div>

    <footer class="fixed-bottom mt-4"> <div class="container-fluid"> <div class="row"> somecontent </div> <div class="row" style="background-color:#0f3238;"> some content </div> </div> </footer>
    </body>

    Monday, October 29, 2018 3:12 PM

All replies

  • User-893317190 posted

    Hi Deepulu1984,

    You could use bootstrap's flex util to help.

    Below is my code.

      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
        <style>
                body, html {
                    height: 100%;
                    margin: 0;
                    font-family: Lato, Arial, Helvetica, sans-serif;
                }
    
    
    
        </style>
    </head>
    <body>
    
       
    
            
    
        <div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 100%;">
            <div class="mb-auto p-2 w-100">
                <nav class="text-center">navbar code</nav>
                <div class="text-center">Maincontent</div>
            </div>
           
            <div class="p-2 w-100">
           
                    <div class=" text-center">
                        somecontent
                    </div>
                    <div class=" text-center" style="background-color:#00ffff;">
                        some content
                    </div>
                
            </div>
        </div>
    
    </body>

    The result.

    For more information about flex  in bootstrap , please refer to

    https://getbootstrap.com/docs/4.1/utilities/flex/

    Best regards,

    Ackerly Xu

    Tuesday, October 30, 2018 4:30 AM