Positioning two buttons at the edge of the div using bootstrap grid

how can I make those two buttons stick to the edge of the div using bootstrap grid?

If someone can also explain a bit too please, I am trying to understand bootstrap grid...

here is what I managed to do so far https://ibb.co/iLDZSv - link to image

Code of what I did so far:

    <div class="row">
        <div class="col-xs-6 col-sm-6">
            <a href="#myTickets" data-toggle="tab" class="btn btn-default"><i
                class="fa fa-arrow-left"></i> Go Back</a>
        </div>

        <div class="col-xs-6 col-sm-3">

            <p></p>

        </div>

        <div class="col-xs-6 col-sm-3">
            <a class="btn btn-danger"><i class="fa fa-lock"></i> Close Ticket</a>
        </div>
    </div>

Solution

The default positioning of elements is to the left. You can use the pull-right helper in Bootstrap to float the object to the right hand side of the div.

<div class="col-xs-6 col-sm-3">
    <a class="btn btn-danger pull-right"><i class="fa fa-lock"></i> Close Ticket</a>
</div>