So you're using Bootstrap 5 to create a cool UI and now you want to align a column on the right-hand side? Sure, you can do that.

And in this guide I'll show you how.

As is usually the case, though, there are a couple of ways to do it. So you've got options.

The Empty Columns

The first way is to fake the alignment by putting empty columns on the left.

Something like this will do the trick:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    <title>Column Align | Carey Development</title>
</head>

<body>
    <div class="row" style="height:200px">
        <div class="col-9 bg-light"></div>
        <div class="col-3 bg-primary"></div>
    </div>
</body>
</html>

I've color-coded the columns to make it easier to see the output. The first 9 columns are light grey while the right-most 3 columns are blue.

You don't have to color the columns, though.

Now if you save that HTML to a file and view it with your favorite browser, you'll see output that looks like this:

So all you need to do is just create "dummy" columns that take up the space on the left. Then put the money columns on the right and add your content there.

That makes your columns on the right appear right-aligned even though they're just filling up the space as they should.

Remember: responsive design uses a 12-column layout. That's why the first child <div> element uses 9 columns (col-9) while the other one uses 3 columns (col-3).

But you could mix that up. Use 10 columns on the left and 2 on the right. Or the other way around.

It's up to you.

Another Option

Another option is to use the justify-content-end class. That class lives up to its name by justifying the content towards the end of the flow, meaning it moves to the right.

In this part of the world, we read from left to right. So the stuff on the right is at the "end."

Anyhoo, give this a whirl:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    <title>Column Align | Carey Development</title>
</head>

<body>
    <div class="row justify-content-end" style="height:200px">
        <div class="col-3 bg-primary"></div>
    </div>
</body>
</html>

Look at that code carefully and you'll see there's only a single child element under the <div> that declares the row.

That's in contrast to the previous code block that included two child elements: one that took up 9 columns and another that took up 3 columns.

This single child element only takes up 3 columns.

But note the class declarations in the parent <div> element. Aside from row, it's using justify-content-end.

That's going to push the child columns to the right. 

Now if you save that HTML code and view it with your favorite browser, you'll see this:

 

This time there's no grey in front of the right-justified blue block. That's because there's no columns with a grey background consuming that space.

Instead, you just see three columns justified to the right. 

And that's all you need to do if you want to right-justify one or more columns.

Wrapping It Up

There you have it. A couple of easy ways to right-justify columns with Bootstrap 5.

If you're in need of some right-justification in your layout, why not give one of these two methods a try?

Just make sure you view the finished product on a mobile platform. That's how you'll know it looks great for smartphone and tablet users.

Have fun!

Photo by Godisable Jacob from Pexels