'Bootstrap 5 How to apply different justifications to elements inside div?

I am using Bootstrap 5 to get a layout like the following:

I am using the following html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <a href="#"><img src="https://picsum.photos/800/600"></a>
            </div>  
            <div class="col-lg-6 col-md-6 col-sm-12">
                <div class="row">
                    <p>Test1</p>
                    <p>Test2</p>
                </div>
                <div class="row">
                    <div class="btn-group">
                        <button type="button" class="btn btn-sm btn-outline-secondary">Button1</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary">Button2</button>
                    </div>
                    <div class="btn-group d-flex justify-content-end">
                        <button type="button" class="btn btn-sm btn-outline-secondary">Button3</button>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

I am having problems in the buttons section, to justify the 3 of them to the bottom, and button3 to the right of the layout.

Any idea how to apply different justifications to the elements inside a div?

twitter-bootstrap bootstrap-5

Solution 1:^[1]

Try this:

            <div class="row">
                <div class="btn-group col-auto me-auto">
                    <button type="button" class="btn btn-sm btn-outline-secondary">Button1</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary">Button2</button>
                </div>
                <div class="btn-group d-flex justify-content-end col-auto">
                    <button type="button" class="btn btn-sm btn-outline-secondary">Button3</button>
                </div>
            </div>

Update

    <!DOCTYPE html>
<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <a href="#"><img src="https://picsum.photos/800/600"></a>
            </div>  
            <div class="col-lg-6 col-md-6 col-sm-12 d-flex flex-column">
                <div class="row mb-auto">
                    <p>Test1</p>
                    <p>Test2</p>
                </div>

                  <div class="row">
                      <div class="btn-group col-auto me-auto">
                          <button type="button" class="btn btn-sm btn-outline-secondary">Button1</button>
                          <button type="button" class="btn btn-sm btn-outline-secondary">Button2</button>
                      </div>
                      <div class="btn-group d-flex justify-content-end col-auto">
                          <button type="button" class="btn btn-sm btn-outline-secondary">Button3</button>
                      </div>
                  </div>                

            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

jsfiddle: https://jsfiddle.net/n0bod2m6/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'Bootstrap 5 How to apply different justifications to elements inside div?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]