How can I get a button in bootstrap 4 to float right without leaving the container it's in?
I am trying to create a container in bootstrap with a button on the bottom floating on the right. Unfortunately, the button is leaving the div. Why is this happening and how can I prevent this? Here is a copy of the HTML
<body>
<div class="container">
<p>
...
</p>
<button type="button" class="btn btn-primary float-right">Primary</button>
</div>
</body>
CSS
.container {
border: 1px solid black;
}
and a plunker: https://plnkr.co/edit/9DUn1CUj0g6NPhEmqeB9?p=preview
Answer
Because the button has applied float-right it will create some out of flow.
Ref : https://www.w3.org/TR/CSS21/visuren.html#x23
Just add
<div style="clear: both;"></div>
after the <button>
.container {
border: 1px solid black;
}<!DOCTYPE html>
<html>
<head>
<link data-require="[email protected]" data-semver="4.0.0-beta" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="4.0.0-beta" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container">
<p>
Measured fer yer chains piracy marooned schooner snow yo-ho-ho parley furl six pounders lanyard. Snow brig Sink me rum American Main reef sails bucko pirate crow's nest Sail ho. American Main coxswain lee heave down tender brig schooner gibbet piracy rum.
</p>
<button type="button" class="btn btn-primary float-right">Primary</button>
<div style="clear: both;"></div>
</div>
</body>
</html>Method 2 :
add overflow: hidden; to container
/* Styles go here */
.container {
border: 1px solid black;
overflow: hidden;
}<!DOCTYPE html>
<html>
<head>
<link data-require="[email protected]" data-semver="4.0.0-beta" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="4.0.0-beta" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container">
<p>
Measured fer yer chains piracy marooned schooner snow yo-ho-ho parley furl six pounders lanyard. Snow brig Sink me rum American Main reef sails bucko pirate crow's nest Sail ho. American Main coxswain lee heave down tender brig schooner gibbet piracy rum.
</p>
<button type="button" class="btn btn-primary float-right">Primary</button>
</div>
</body>
</html>