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

Navigation
2

I am updating the code for the current version Bootstrap 4 and was in Bootstrap version 3.

I updated the CSS, JS, and others files. Some parts are no longer working. These are, for example, those with the pull-right and pull-left classes.

This occurs with other parts of the site as well. I have already reviewed the CSS and even then, I did not find the reason. Is this a 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>
    
asked by anonymous 03.11.2017 / 19:59

1 answer

5

The pull-right and pull-left classes no longer work in Bootstrap v4 because they were 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 Bootstrap link that shows the changes that occurred for version 4.

  

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

For the commented classes .pull-left and .pull-right they have been replaced by other classes, respectively .float-left and .float-right .

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

In this case of the navigation bar, you will replace the .pull with the current corresponding .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 in the snippet below that if you try to add the class .pull-* does not work as expected due to the removal of it in the Bootstrap 4 version: 

<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 changes to learn how to properly migrate one project for version 4 of Bootstrap.

    
03.11.2017 / 20:10
Select grouping by average per hour and sum per day How to use ALIASES in Oracle correctly?