Adding space between two buttons - css

Question

I am using haml.erb file. I would like to add space between two buttons in UI. Now the two buttons are appearing one after one without space. How can i do?
= link_to :back, :class => "btn btn-success", :href => '/pt_setup' do
%i.icon-arrow-left.icon-white
Back // does not workout
=link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success'

Answer 1

you can add margin left on second button. you can add class on second button e.g
=link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success left-margin'
and then you can add css in your haml file
:css
.left-margin { margin-left: 2px }
Or you can add inline css to one of these buttons.

Answer 2

As you are using Bootstrap
Wrap your buttons in a div with class='col-xs-3' (for example).
Add class="btn-block" to your buttons.
Note: No need to use extra css unnecessary

Answer 3

Your current code puts a space behind the text 'Back', which is inside your link/button, so of course this will not have any affect on the spacing between the buttons themselves.
It has been a while since using haml but something along the lines of:
= link_to :back, :class => "btn btn-success", :href => '/pt_setup' do
%i.icon-arrow-left.icon-white
Back
= link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success'
Should work in your case.
However, why leave layout / styling to your template at all? use CSS for organizing your layout, put a margin on the right side of .btn class elements, or add a new custom button class and add the margin to limit the scope of buttons affected if you don't want a global margin setting on all buttons.

Answer 4

Try:
= link_to :back, :class => "btn btn-success", :href => '/pt_setup' do
%i.icon-arrow-left.icon-white
Back // does not workout
=link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success', :style => 'margin-left:10px;'

Answer 5

If you don't want to add a css for spacing. You can add ">" at the end of your brackets for space before and "<" for space after.
Example:
%form
%input{name: "search", placeholder: "Text Here", type: "text"}
%button{type: "submit"}>
%i.fa.fa-search
Will space before the button, separating it from the input text box
Or Equivalently:
%form
%input{name: "search", placeholder: "Text Here", type: "text"}<
%button{type: "submit"}
%i.fa.fa-search
Will space after the input box