Why are the pull-left and pull-right classes no longer working in Bootstrap 4?

Asked

Viewed 12,040 times

2

I’m updating the code to the current version Bootstrap 4 and was in Bootstrap version 3.

I have updated the CSS, JS, and other files. It turns out that some parts are no longer working. These are for example the ones with the classes pull-right and pull-left.

This happens with other parts of the site as well. I’ve already reviewed the CSS and still can’t find the reason. This is some problem with Bootstrap?

<div class="navbar-header pull-left">
    <a href="index.php" class="navbar-brand">
        <small>
            <img src="/logo.png" width="30px">Site
        </small>
     </a>
</div>
twitter-bootstrap bootstrap-3 bootstrap-4

1 answer

7


The classes pull-right and pull-left no longer work in Bootstrap v4 because they have been removed.

Added . float-{Sm,Md,lg,Xl}-{left,right,None} classes for Responsive floats and Removed . pull-left and . pull-right Since they’re Redundant to . float-left and . float-right.

There is a link from Bootstrap itself that shows the changes that occurred for version 4.

Bootstrap 4 is a major rewrite of almost the entire project. The most notable changes are summarized immediately below, followed by specific class and behavior changes in relevant components.

In the case of the commented classes .pull-left and .pull-right they were replaced by other classes, respectively .float-left and .float-right.

In addition, they were increased with the sizes of grid to which you can add the desired sizes, for example .float-xs-right or .float-sm-left and/or other related matters. It is not necessary to determine a size for each element, it is only a specific functionality that can help in some cases.

In this case of the navigation bar, you will replace the .pull by the current correspondent .float:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="navbar-header float-left">
        <a href="index.php" class="navbar-brand">
            <small>
                <img src="/logo.png" width="30px">Site
            </small>
         </a>
    </div>

See also on snippet below that if you try to add the class .pull-* does not work as expected due to removal of the same in Bootstrap version 4:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="navbar-header pull-right">
        <a href="index.php" class="navbar-brand">
            <small>
                <img src="/logo.png" width="30px">Texto com classe pull-right
            </small>
         </a>
    </div>

Other than .float-*:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="navbar-header float-right">
        <a href="index.php" class="navbar-brand">
            <small>
                <img src="/logo.png" width="30px">Texto com classe float-right
            </small>
         </a>
    </div>

Interesting that you read the changelog of change complete to know how to properly migrate a project to Bootstrap version 4.

Browser other questions tagged twitter-bootstrap bootstrap-3 bootstrap-4

You are not signed in. Login or sign up in order to post.