Bootstrap components added for alerts and notices

UPDATE: 6/July/2016

Some minor additions to the Exercise Planner app were made today, after I spent some time looking into Bootstrap.

Previously I have used Bourbon to style Rails apps, which I found to be quite customizable, in addition to having a full compliment of CSS components.

While I enjoy doing a lot of the front-end work by hand, it seemed reasonable to me that I should get familiar with Bootstrap and components. In case I find myself in the situation that I’m in now I will be able to quickly put together a basic front-end layout for these demo deployments.

Bootstrap Alerts

The Bootstrap gem provides your Rails app with an easy to use CSS class called ‘alert’. All I had to do was wrap my embedded ruby code in the div:

Before:

<p class="alert"><%= alert %></p>

With Bootstrap component:

<% if alert %>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span></button>
<strong>Warning!</strong><%= alert %>
</div>
<% end %>

I know that looks a little bit more involved than before, but instead of getting a plain line of text, your app will display a nice warning box that can be closed. You will also have a few extra options, allowing you to customise how the alerts are shown.

One very simple option is changing the colour of the dialogue box the alerts appear inside of. Bootstrap uses a semantic colouring scheme, so you can organise your alerts and notices by type/colour. Right now I have notices also being displayed, but I want them to appear inside a blue box:

<% if notice %>
<div class="alert alert-info" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span></button>
<%= notice %>
</div>
<% end %>

By using the class “alert-info”, all notices will be displayed in a blue dialogue box. I’m sure I will have to dig into some of the other options soon enough!

Bootstrap Alerts

Try the app.

View the code.