Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap pull-right causing element overlap

I am trying to get a single button positioned above a list, but with the button to the right.

When I add the pull-right class to the button (or a containing div) the button is then overlapped by the list.

<div>
    <div class="pull-right">
        <button type="button" class="btn btn-default">Add</button>
    </div>
    <ul class="list-group">
        <li class="list-group-item">Something something 1</li>
        <li class="list-group-item">Something something 2</li>
        <li class="list-group-item">Something something 2</li>
    </ul>
</div>

jsfiddle: http://jsfiddle.net/paulbau/384YH/

like image 504
user380689 Avatar asked May 15 '14 00:05

user380689


People also ask

How do I stop bootstrap overlapping?

bootstrap's affix method is easy. 1)Add data-spy=”affix” to the div you would like to fix in the right side. Also Add a class to the div, in the example i added the class as my-affix-div.

Why are my DIV elements overlapping?

This could happen for several reasons, especially when you consider the position problems with divs from one website to another. Similarly, box elements may overlap for a few reasons, ranging from positioning errors to overflow issues and simple float problems.

Why is my content overlapping in HTML?

The reason for the overlapping lines is quite simple: The line height is not sufficient to contain the text size. You have "hard-coded" the font-size via inline CSS but did not adjust the line-height , for instance.


1 Answers

You should add the pull-right class to the button element instead and then add a clearfix to the parent element. In doing so, the div won't collapse upon itself.

Updated Example

<div class="clearfix">
    <button type="button" class="btn btn-default pull-right">Add</button>
</div>

Alternatively, since the button is an inline-block level element, you could avoid floating it and use text-align:right instead. Just add the class text-right to the parent. You no longer need the clearfix because the button element isn't being removed from the document flow.

Example Here

<div class="text-right">
    <button type="button" class="btn btn-default">Add</button>
</div>
like image 142
Josh Crozier Avatar answered Oct 13 '22 19:10

Josh Crozier