CODEWITHSUNDEEP
csstwitter-bootstrap
user2409399
user2409399

Reputation: 267

Bootstrap: fixed vertical position of a responsive column?

I'm trying to fix the vertical position of a bootstrap column without success.

<div class="col-sm-9 col-xs-12 fixed">
  <div class="row pad-20">
    <div class="col-xs-6">
        <button type="button" value="0" class="btn {{color1}} btn-lg btn-block choice">{{choice1}}</button>
    </div>  
    <div class="col-xs-6">
        <button type="button" value="1" class="btn {{color2}} btn-lg btn-block choice">{{choice2}}</button>
    </div>
  </div>    
 </div>
</div>

Where fixed is: 

.fixed{
 position: fixed;
 bottom: 5px; 
}

The proportion sm-9 and xs-12 are not respected ... Any help?

Upvotes: 0

Views: 1327

Answers (1)

Ezra Free
Ezra Free

Reputation: 754

Do you have a <div class="container"> around the markup you show? Also, in the markup you show there's an extra closing </div> tag.

Seems to be working in this JSFiddle I put together:

https://jsfiddle.net/o540r7cf/

HTML:

<div class="container">
    <div class="row">
        <div class="col-sm-9 col-xs-12 fixed">
            <div class="row">
                <div class="col-md-6 col-xs-6">
                    <button type="button" value="0" class="btn btn-primary btn-lg btn-block"> Choice 1</button>
                </div>
                <div class="col-md-6 col-xs-6">
                    <button type="button" value="1" class="btn btn-primary btn-lg btn-block">Choice 2</button>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

.fixed {
    position: fixed;
    bottom: 5px;
}

Upvotes: 2

Related Questions