Align button to the right
CssBootstrap 4Css Problem Overview
I know this must be really simple but I'm trying to set a button to the right of the window using only bootstrap 4 classes. It must be in the same row as the text.
<html>
<head>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<body>
<div class="row">
<h3 class="one">Text</h3>
<button class="btn btn-secondary pull-right">Button</button>
</div>
</body>
</html>
The code is in here
Css Solutions
Solution 1 - Css
Bootstrap 4 uses .float-right as opposed to .pull-right in Bootstrap 3. Also, don't forget to properly nest your rows with columns.
<div class="row">
<div class="col-lg-12">
<h3 class="one">Text</h3>
<button class="btn btn-secondary float-right">Button</button>
</div>
</div>
Solution 2 - Css
<div class="container-fluid">
<div class="row">
<h3 class="one">Text</h3>
<button class="btn btn-secondary ml-auto">Button</button>
</div>
</div>
.ml-auto is Bootstraph 4's non-flexbox way of aligning things.
Solution 3 - Css
You can also use like below code.
<button style="position: absolute; right: 0;">Button</button>
Solution 4 - Css
If you don't want to use float, the easiest and cleanest way to do it is by using an auto width column:
<div class="row">
<div class="col">
<h3 class="one">Text</h3>
</div>
<div class="col-auto">
<button class="btn btn-secondary pull-right">Button</button>
</div>
</div>
Solution 5 - Css
In my case I needed to align two or more buttons to the right, after several attempts this worked for me:
<div class="float-right">
<button type="button" class="btn btn-primary">First Button</button>
<button type="button" class="btn btn-secondary">Second Button</button>
</div>
Solution 6 - Css
try to put your script and link on the head like this:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous">
</script>
</head>
<body>
<div class="row">
<h3 class="one">Text</h3>
<button class="btn btn-secondary pull-right">Button</button>
</div>
</body>
</html>
Solution 7 - Css
Maybe you can use float:right;:
.one {
padding-left: 1em;
text-color: white;
display:inline;
}
.two {
background-color: #00ffff;
}
.pull-right{
float:right;
}
<html>
<head>
</head>
<body>
<div class="row">
<h3 class="one">Text</h3>
<button class="btn btn-secondary pull-right">Button</button>
</div>
</body>
</html>
Solution 8 - Css
<v-btn class="float-right"> Download</v-btn>
Solution 9 - Css
The bootstrap 4.0.0 file you are getting from cdn doesn't have a pull-right (or pull-left) class. The v4 is in alpha, so there are many issues like that.
There are 2 options:
-
Reverse to bootstrap 3.3.7
-
Write your own CSS.