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

3

I'm using the bootstrap for a simple dashboard and would like your help regarding the positioning of certain elements on the page.

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

What have I tried? I removed class .btn-block , and the button stayed with display: inline-block , which is acceptable, since I would only need to set class .page-header to get display: inline-block also and this would solve my problem, since the button and the header would be on the same line. I did this, but I would like the button to be right-aligned, and the header to follow it there.

How it was:

HowIwouldlikeyoutostay:

This second print I was able to do using position: absolute; , together with top|right . However, if possible, I would like an NOT idea to involve working with position .

Does anyone know of any class bootstrap that could help me with 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 using the grid system . But I can not use more rows than I already have. The spacing between the rows is already large, and I need to fit this form in as little space as possible. Adding another row would be impractical. Assuming I was going to use it, I would have to remove all the margins / paddings from the other elements, making the form much worse.

    
asked by anonymous 04.11.2016 / 00:21

1 answer

1

Have you tried the .pull-right class? From what I see you're using Bootstrap, right? Try:

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