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>
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.
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With