CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
ilazgo
ilazgo

Reputation: 650

How to put a div to the right of .container in Bootstrap?

Basically, I need to put a back-to-top button at the right side of the footer.

Something like this: what I need

What I get is this: what I get

You can see that there is a blank space between footer and the end of viewport, that space is the height the back-to-top button, if I remove the button the blank space is removed too.

I'm using bootstrap so my html code is similar to:

<footer class="container-fluid">
    <div class="container">
        <div class="content1>CONTENT 1</div>
        <div class="content2>CONTENT 2</div>
    </div>

    <div class="back-to-top>TOP</div>
</footer>

You can see an example in Bootply. You can see that the footer has to be 20px height (min-height: 20px) but instead it is 40px.

I think that my problem will be solved if I can put the .back-to-top div beside the .container div.

How can I get this?

Upvotes: 1

Views: 1635

Answers (2)

Bladepianist
Bladepianist

Reputation: 490

Having a min-height proxy doesn't mean you footer is going to be 20px. That just mean its height won't be smaller than that. If you want your height to be 20px, use height property. If for some reason you want it to be variable, you can look to the max-height property.

For your "back-to-top" button, here is my suggestion :

http://jsfiddle.net/Bladepianist/38ne021p/

HTML

<footer class="container-fluid navbar-inverse">
    <div class="row">
        <div class="col-xs-6">CONTENT 1</div>
        <div class="col-xs-5">CONTENT 2</div>
        <div class="col-xs-1 text-right" id="back-to-top">TOP</div>
    </div>
</footer>

CSS

.container-fluid {
    color: white;
}

Basically, I change your "back-tot-top" class to an ID in my model but you're free to adapt it to your liking. Using the col-system and the text-positions classes, you can achieve the same rendering as you show in your question. That way, the back-to-top button is part of the footer.

Hope that's helping ;).

Upvotes: 0

Bluety
Bluety

Reputation: 1909

You can use helper class pull-right and move TOP link before container: 

<footer class="container-fluid">
    <div class="back-to-top pull-right">TOP</div>
    <div class="container">
        <div class="content1>CONTENT 1</div>
        <div class="content2>CONTENT 2</div>
    </div>
</footer>

You need to remove your CSS bloc:

.back-to-top {
    float: right;
    position: relative;
    top: -20px;
}

Doc: http://getbootstrap.com/css/#helper-classes-floats

Upvotes: 2

Related Questions