I'm having some trouble displaying a border on my buttons.
The button styles are defined in the app/assets/stylesheets/modules/_buttons.scss file, which I have imported into application.scss.
@import "bootstrap-sprockets";
@import "bootstrap";
//modules
@import "modules/buttons";
Here is the CSS for the buttons:
.button {
border: 1px solid;
padding: 1em 1.5em;
}
I have added the button class to my header file as follows:
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="#">OpEd</a>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Share your opinion", new_post_path, class: "button" %></li>
<% if user_signed_in? %>
<li><a href= "#"><%= current_user.first_name %></a></li>
<li><%=link_to "Sign out", destroy_user_session_path, method: :delete %></li>
<%else%>
<li><%= link_to "Sign in / Sign up", new_user_session_path, class: "button" %> </li>
<%end%>
</ul>
</div>
</nav>
Can anyone help me figure out why the border is not showing up on the buttons?