CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Patrick McDermott
Patrick McDermott

Reputation: 1220

Issues with v4 bootstrap classes

I am using bootstrap v4, with CDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

Issue

Some of the classes aren't working, such as pull-right or navbar-right. I reverted back to using an older version of Bootstrap and the classes worked, but the layout of course changed and I would prefer to carry on using v4. I'm unable to float two li elements to the right of the main group of li elements.

Aim

To find out why classes aren't working in v4, and to float the two li items, login and register, to the right in the main nav, using the class navbar-right

HTML

<nav class="navbar bg--lighter-blue">
    <div class="header-container">
        <div class="col-md-12">
            <ul class="nav navbar-nav pull-md-right">
                <li class="nav-item active"><a class="nav-link txt--white text-uppercase" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link txt--white text-uppercase" href="#">Benefits</a></li>
                <li class="nav-item"><a class="nav-link txt--white text-uppercase" href="#">How it works</a></li>
                <li class="nav-item"><a class="nav-link txt--white text-uppercase" href="#">About</a></li>
                <li class="nav-item"><a class="nav-link txt--white text-uppercase" href="#">Subscribe</a></li>
                <li class="nav-item"><a class="nav-link txt--white text-uppercase" href="#">FAQ</a></li>
                <li class="nav-item"><a class="nav-link txt--white text-uppercase" href="#">Contact</a></li>    
            </ul>
            <ul class="nav navbar-nav">
                <li class="nav-item"><a class="nav-link txt--white text-uppercase" href="subpages/login.html">Login</a></li>
                <li class="nav-item"><a class="nav-link txt--white text-uppercase" href="#">Register</a></li>   
            </ul>                                   
        </div>      
    </div>                  
</nav>

CSS

.header-container { 
 margin-left: auto;
 margin-right: auto;
 padding-left: 15px;
 padding-right: 15px;   
 width: 90%;
}

Upvotes: 0

Views: 277

Answers (1)

Nagy Istv&#225;n
Nagy Istv&#225;n

Reputation: 131

Bootstrap 4 docs:

Added .float-{xs,sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-xs-left and .float-xs-right.

Utilities section https://v4-alpha.getbootstrap.com/migration/

So you can use float-{xs,sm,md,lg,xl}-{left,right,none} classes

Upvotes: 3

Related Questions