title: Rails: Move close button on Bootstrap alert messages
body: <p>I have added the flash messages feature to my rails app.</p>
  
  <pre><code>&lt;% flash.each do |key, value| %&gt;
   &lt;% unless key.to_s == 'timedout' %&gt;
      &lt;div class="alert alert-&lt;%= key %&gt;"&gt;
        &lt;a href="#" data-dismiss="alert" class="close"&gt;×&lt;/a&gt;
        &lt;ul style="list-style-type: none;"&gt;
          &lt;li&gt;
            &lt;%= value %&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
   &lt;% end %&gt;
   &lt;% end %&gt;
  
  .alert-alert
    margin-top: 10px
    background-color: #ffffff
    border-color: #ffffff
    color: #b94a48
    text-align: center
  
  
  .alert-success
     margin-top: 10px
     color: #317EAC
     background-color: #f5f5f5
     border-color: #f5f5f5
     text-align: center
  
  
  .alert-notice
    top: -10px
    color: #317EAC
    background-color: #ffffff
    border-color: #ffffff
    text-align: center
  
  .alert
    height: 100%
    width: 100%
    line-height: 14px
  
  .close
    height: 100%
    line-height: 14px
  </code></pre>
  
  <p>Everything works just fine as you can see in the below image:</p>
  
  <p><a href="https://i.stack.imgur.com/2Y8M0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2Y8M0.png" alt="enter image description here"></a></p>
  
  <p>Now I would like to move the close button right next to the text. Any idea how I can do that?</p>