Bootstrap - custom flash/alert boxes - html

Question

I have a Rails app in which I use Boosttrap and HAML, when I present the flash messages I would like to change their appearance slightly. I want them to be full screen with cold-md-1 margins on each side, and a col-md-10 contains the flash message.
What I've tried is:
- if flash[:notice]
/ Full width is a css class with 100% width, so the width works...
.alert.alert-info.alert-dismissable.full-width
.col-md-1
%button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria- hidden' => "true"} ×
= flash[:notice]
.col-md-1
This doesn't work quite as I want (not the correct margins). I have also tried to contain the flash message like this:
.col-md-1
.col-md-10
[message]
.col-md-1
Then it looks ok, but the close button doesn't work as I want (it doesn't close the whole message). To illustrate what I what to achieve, see the image below:
Here I want the close button (note: only the close button, and not the background) to align with the account drop down and the gray box.
Any ideas on what I should do?

Answer 1

You are making simple thing look complex. You want to have col-md-1 margin on each side so your alerts width will be col-md-10 and bootstrap3 has col-md-offset-* classes for offsetting it.
- if flash[:notice]
.alert.alert-info.alert-dismissable.col-md-10.col-md-offset-1
.col-md-1
// give proper width and margin to this div to align button with dropdown
%button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria- hidden' => "true"} ×
= flash[:notice]

Answer 2

Solved it by using some javascript (or coffee-script). View:
.alert.alert-info.alert-dismissable.no-border-radius
.container
.col-md-1
.col-md-10
= flash[:notice]
%button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria-hidden' => "true"} ×
.col-md-1
JavaScript (or CoffeeScript):
$('.close').click ->
$(".alert").hide();