Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap .well + .pull-right issue

I'm having some trouble with bootstraps pull-right class. When I have a floated element inside a .well the well doesn't count the floated element into its size. So the element (in my case a <button> is half outside of the div.

I'm sure there is a simple fix for this.

Code if anyone wonders:

<div class="well"> <h5>TEXT</h5> <p><img src="img/src.png" class="pull-right" alt=""/>Genere illum vero diam ille sui coniungens in lucem in. Cyrenaeam plus plorantes abscederem assignato ipsum ait mea vero non ait est amet coram me testatur in!</p> <button class="btn btn-metro pull-right">text</button> </div> 
like image 709
justanotherhobbyist Avatar asked May 28 '13 14:05

justanotherhobbyist


People also ask

Why pull-right is not working in bootstrap?

pull-right working? The primary reason is that you are trying to use them either in bootstrap 4 or a later version. They may work or not depending on the bootstrap version of your website.

What is pull-right in bootstrap?

pull-right classes have been replaced with the . float-left and . float-right classes in Bootstrap 4. These utility classes are used to float an element to the left or right on the various viewport sizes based on the Bootstrap Grid.

How do you pull-right in CSS?

The right property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements. If position: absolute; or position: fixed; - the right property sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor.


1 Answers

I have solved the problem by clearing the floats. It's simple just add the class .clearfix to the .well.

As Alexis said in the comments, the div should look like this:

<div class="well clearfix"> </div> 
like image 127
justanotherhobbyist Avatar answered Sep 20 '22 23:09

justanotherhobbyist