Bootstrap - How to keep the natural container layout while fixing the container to the bottom?


Tags: html,css,twitter-bootstrap

Problem :

I am having a Bootstrap one-page website, which uses a full-screen background. All content should be contained within the visible screen without having to scroll; i.e. I want to exactly position different elements with a fixed position.

I am currently stuck while trying to fix a container containing 3 equal columns. When I am fixing the container and position it 70px above the bottom, the columns move to left instead of keeping the natural centered position:

HTML

<div class="container front-page-widgets">

  <div class="row">

    <div class="col-md-4">

      <?php if ( dynamic_sidebar( 'front-left' ) ); ?>

    </div>
    <div class="col-md-4">

      <?php if ( dynamic_sidebar( 'front-center' ) ); ?>

    </div>
    <div class="col-md-4">

      <?php if ( dynamic_sidebar( 'front-right' ) ); ?>

    </div>
  </div>

</div>

CSS

.front-page-widgets {
    position: fixed;
    bottom: 70px;
}

Would appreciate your advise how to keep the natural container layout while fixing the container to the bottom.



Solution :

Surely your .container moves to left because you set the position: fixed and it sticks to the very left site as designed.

If you want to center the Bootstrap's .container horizontally while position: fixed is applied you may need to add left: 0 and right: 0 to achieve that.

Works on all resolutions.

Bootply ex.


    CSS Howto..

    How do you create boxes like github's explore section?

    How to modify twitter bootstrap “.icon-bar” colors

    How to disable Bootstrap 3 collapse nav menu css

    How to change an image on click using CSS alone?

    how to apply stylesheet to wp frontend, via plugin i created?

    How to apply a CSS gradient over a text, from a transparent to an opaque colour

    How to make this working Java-script more efficient

    How do I center the twitter bootstrap tabs on the page?

    How to make div box actually touching the side of the browser as mine has a gap?

    CSS: how to style to make text not wrap?

    show content block on right above the content on right when displaying on mobile

    How to change list item color with JQuery

    How to separate settings and css in a less?

    how decrease font size?

    How to capture extra css class in addition to the pseduo class in this less (css) code?

    How to remove excess space added with \n

    How to achieve mouseover effect where a hover div slides in from the side

    How to switch css table-cell from left to right?

    How to edit jquery slider

    How to create overlaying papers (pile) - CSS / HTML

    Slideshow by changing background-image CSS attribute using JQuery in Drupal 7

    How set the same height of divs

    How to smooth the moving of background image?

    How would I detect CSS Transition support on :before pseudo-elements with javascript?

    CSS - How can I center my navigation bar?

    Creating an animated image slider - how to animate and restrict multiple clicks?

    How to bottom-align these divs?

    How do I change image A when hovering over image B without JavaScript only CSS

    How to style nested element that is styled by its parent already

    How to combine Background Image and CSS Gradient