Patrick McDermott Patrick McDermott - 1 month ago 14
CSS Question

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%;
}

Answer

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

Comments