How to position button and . page-header in the same Row (inline)

Question

I am using the bootstrap for a simple and helpful panel of you regarding the positioning of certain elements on the page.

I would like to position the save button along with the .page-header. But this class has the property display: block; and I’m using a button with class .btn btn-primary btn-block. The button is with display: block, because of the class .btn-block.

What did I try? I removed the class .btn-block, and the button was display: inline-block, which is acceptable, because I would only need to class .page-header to get the display: inline-block also and this would solve my problem, because the button and header would be on the same line. I did this, but I would like the button to be aligned to the right, and the header to accompany it there.

As it turned out:

How I’d like you to stay:

This second print I managed to do using the position: absolute;, together with top|right. However, if possible, I would like an idea that NAY involves working with the position.

Does anyone know any class bootstrap that could assist me in this implementation? If not, what CSS trick would you use to get the result of the second print?

Addendum:

I know you can implement this easily used the grid system. But I can’t use more Rows than you already have. The spacing between the Rows is already large, and I need to fit this form into the smallest possible space. Adding another Row would be unworkable. Assuming I was going to use it, I would have to remove all spacing (margins/paddings) from the other elements, making the form much worse.

Answer 1

Have you tried the . pull-right class? The way I see it, you’re wearing Bootstrap, right? Try:

<span class="pull-right">
    <a class="btn btn-default" href="url">Salvar</a>
</span>