Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
.float-right doesn't work inside a .row
See original GitHub issueThe button in the HTML below (codepen.io) remains left-aligned despite the float-right class.
<!DOCTYPE html>
<html>
<head>
<title>.float-right issue</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>.row { background-color: #ff8621; }</style>
</head>
<body>
<div class="container">
<div class="row">
<button class="btn btn-primary float-right">To the right!</button>
</div>
</div>
</body>
</html>
Firefox 58.0.2, linux/amd64
Issue Analytics
- State:
- Created 6 years ago
- Comments:11 (6 by maintainers)
Top Results From Across the Web
Bootstrap 4 float-right inside .row - Stack Overflow
row is a flex container in bootstrap-4, to align content in flex-container you need to use ml-auto and mr-auto . Here's the example:....
Read more >float | CSS-Tricks
The float property in CSS is used for positioning and layout on web pages. A common usage might be floating an image to...
Read more >Floats - Tailwind CSS
Use float-right to float an element to the right of its container. ... sitting down, opening a book, right now, in a branch...
Read more >Floats (left and right) not working - Codecademy
float doesn't work with position: fixed (and absolute). there are many things you can do to solve this issue, i believe this is...
Read more >float - CSS: Cascading Style Sheets - MDN Web Docs - Mozilla
The float CSS property places an element on the left or right side of ... remaining a part of the flow (in contrast...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I am afraid, it cannot work, as floats in flexbox context don’t work by principle. But you can achieve floating behaviour by adding
margin: autoin desired direction. So in your case (to let the element float right) addmargin-left: autoto it. Adding.ml-autoon the button, should get you there.See example here: https://stackoverflow.com/a/36606694/2296044
@opennota Is that the documentations’ problem though? Flex and float generally don’t work well together anyway. There’s a couple of assumptions here:
1 - The developer knows enough about CSS to know the quirks 2 - The developer doesn’t know enough about CSS to use flex and float together.
I don’t think we need to hand-hold the developer and tell them what doesn’t work well together.