Can't position HTML elements using bootstrap v4 - html

Question

I have header tag inside the header I have one container for logo and one container for login form. I want my logo to be left and my login form to be position top right angle, but when I set float-left to the logo container and float-right to the login form they break. I've made sure the containers to be enough sized to fit in, but they still break.
Here is my code:
<header class="bg-inverse text-white col-sm-12" style="border: 1px solid blue">
<div id="logo" class="col-sm-8"style="border:1px solid red">
<h1 class="font-weight-bold">Somelogo</h1>
</div>
<div id="login-form" class="col-sm-3">
<form class="" style="border: 1px solid blue">
<div class="form-group mb-0">
<label for="username">Username</label>
<input type="text" class="form-control form-control-sm" id="username">
</div>
<div class="form-group mb-1">
<label class="pt-1 mb-0" for="Password" style="border: 1px solid blue">Password</label>
<input type="password" class="form-control form-control-sm" id="password">
</div>
<button type="submit" class="btn btn-primary col-sm-5 btn-sm">register</button>
<button type="submit" class="btn btn-primary col-sm-5 btn-sm">login</button>
</form>
</div>
</header>
This is how to looks like without setting a position Picture 1
This is how it looks when I set float:left to the div with id logo and float:right to the div with id login-formPicture 2
This is with only setting the div with id login-form to float-rightPicture 3
PS: I'm trying to use only bootstrap 4. And please explain what is the problem, why is this happening.

Answer 1

The problem is that you aren's using the Bootstrap grid correctly. This is a common beginner mistake.
Bootstrap rows and columns are designed to work together.
That means: You cannot nest a Bootstrap column directly into another Bootstrap column. If you do, you'll inevitably run into issues as is the case here.
Solution:
When nesting anything inside a Bootstrap column, first put a div (or another suitable HTML element) with the class .row into that column and then put a div with the class .col into that row div.
WRONG:
<div class="container">
<div class="row">
<div class="col">
<div class="col"></div>
</div>
</div>
</div>
RIGHT:
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col"></div>
</div>
</div>
</div>
</div>
This option would also work fine:
<div class="container">
<div class="row">
<div class="col">
</div>
</div>
<div class="row">
<div class="col">
</div>
</div>
</div>
I suspect the following is the layout you wanted to create:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<header class="bg-inverse col-sm-12" style="border: 1px solid blue">
<div class="row">
<div id="logo" class="col-sm-8" style="border:1px solid red">
<h1 class="font-weight-bold">Somelogo</h1>
</div>
<div id="login-form" class="col-sm-3 offset-sm-1">
<form class="" style="border: 1px solid blue">
<div class="form-group mb-0">
<label for="username">Username</label>
<input type="text" class="form-control form-control-sm" id="username">
</div>
<div class="form-group mb-1">
<label class="pt-1 mb-0" for="Password" style="border: 1px solid blue">Password</label>
<input type="password" class="form-control form-control-sm" id="password">
</div>
<button type="submit" class="btn btn-primary col-sm-5 btn-sm mb-2 mb-sm-0">register</button>
<button type="submit" class="btn btn-primary col-sm-5 btn-sm">login</button>
</form>
</div>
</div>
</header>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
Note:
I had added the .container-fluid class and removed the .text-white class in the code snippet above.
P.S. I'm adding another version here that I think is better than the previous but it really depends on what you actually want. Here it is:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<header class="bg-inverse" style="border: 1px solid blue">
<div class="container">
<div class="row" style="border: 1px solid blue">
<div id="logo" class="col-sm-8" style="border:1px solid red">
<h1 class="font-weight-bold">Somelogo</h1>
</div>
<div id="login-form" class="col-sm-4 col-lg-3 offset-lg-1">
<form class="" style="border: 1px solid blue">
<div class="form-group mb-0">
<label for="username">Username</label>
<input type="text" class="form-control form-control-sm" id="username">
</div>
<div class="form-group mb-1">
<label class="pt-1 mb-0" for="Password" style="border: 1px solid blue">Password</label>
<input type="password" class="form-control form-control-sm" id="password">
</div>
<button type="submit" class="btn btn-primary col-sm-5 btn-sm mb-2 mb-sm-0">register</button>
<button type="submit" class="btn btn-primary col-sm-5 btn-sm">login</button>
</form>
</div>
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

Answer 2

You can try the following solution, using the flex utilities of Bootstrap 4:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<header class="bg-dark text-white col-sm-12 d-flex justify-content-between align-items-center" style="border: 1px solid blue">
<div id="logo" class="col-sm-8" style="border:1px solid red">
<h1 class="font-weight-bold">Somelogo</h1>
</div>
<div id="login-form" class="col-sm-3">
<form style="border: 1px solid blue">
<div class="form-group mb-0">
<label for="username">Username</label>
<input type="text" class="form-control form-control-sm" id="username">
</div>
<div class="form-group mb-1">
<label class="pt-1 mb-0" for="Password">Password</label>
<input type="password" class="form-control form-control-sm" id="password">
</div>
<button type="submit" class="btn btn-primary col-sm-5 btn-sm">register</button>
<button type="submit" class="btn btn-primary col-sm-5 btn-sm">login</button>
</form>
</div>
</header>
Another solution using .container and .row:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<header class="container bg-dark text-white col-sm-12" style="border: 1px solid blue">
<div class="row">
<div id="logo" class="col-sm-8 align-self-center mr-auto" style="border:1px solid red">
<h1 class="font-weight-bold">Somelogo</h1>
</div>
<div id="login-form" class="col-sm-3">
<form style="border: 1px solid blue">
<div class="form-group mb-0">
<label for="username">Username</label>
<input type="text" class="form-control form-control-sm" id="username">
</div>
<div class="form-group mb-1">
<label class="pt-1 mb-0" for="Password">Password</label>
<input type="password" class="form-control form-control-sm" id="password">
</div>
<button type="submit" class="btn btn-primary col-sm-5 btn-sm">register</button>
<button type="submit" class="btn btn-primary col-sm-5 btn-sm">login</button>
</form>
</div>
</div>
</header>