Bootstrap 3 and Haml - Adjust button width

Question

I have the following haml code in my rails 4 view, using bootstrap 3:

%div{:class => 'btn-group'}
  %button{:class => 'btn btn-default btn-lg dropdown-toggle', :type => 'button', 'data-toggle'.to_sym => 'dropdown'}
    %span{:class => 'caret'}
    %span{:class => 'sr-only'} Toggle Dropdown
  %ul{:class => 'dropdown-menu'}
    %a{:class => 'close_task', :name => 'name', :href => '#' } Close

This renders an incredibly small button, despite the button class of btn-lg. I'm new to haml, so what am I missing that is causing this button to be so small here?

Answer 1

Add a text to the button, so css would be applied around it. For example:

%button{:class => 'btn btn-default btn-lg dropdown-toggle', :type => 'button', 'data-toggle'.to_sym => 'dropdown'} MyButton

In your case, there is no text for the button. It requires at least one non blank character to apply styling . Above will create a large size bootstrap button with the text MyButton

Answer 2

According to the Bootstrap 3 documentation, you might want to try to size the button group itself instead of the button's nested inside of the button group.

%div{:class => 'btn-group btn-group-lg'}
  %button{:class => 'btn btn-default dropdown-toggle', :type => 'button', 'data-toggle' => 'dropdown'}
    %span{:class => 'caret'}
    %span{:class => 'sr-only'} Toggle Dropdown
  %ul{:class => 'dropdown-menu'}
    %a{:class => 'close_task', :name => 'name', :href => '#' } Close