Bootstrap icon misalignment

Question

I am trying to align my words with icon. I tried the methods from this site: Vertical alignment of text and icon in button

current state

My code:

<div class = "row">
    <div class = "col-md-8">
        <h3><%= link_to item.title, item , id: "font-colour" %></h3>    
        <p><%=  if item.description.length > 70
                    item.description[0..70].gsub(/\s\w+\s*$/, '...')
                else 
                    item.description
                end
        %></p>  

    </div>     

    <%= link_to complete_item_path(item), id: "font-colour", method: :patch do %>
        <i class="fa fa-square-o fa-2x align-center"></i>
    <% end %>

    <div class = "col-md-1">
        <%= link_to item_path(item), id: "font-colour", method: :delete do %>
            <i class="fa fa-trash fa-2x align-center"></i>
        <%end%>
    </div> 
</div>

score 0 · Answer 1 · answered Dec 25 '19 at 13:38

Adding display: flex;align-items: center; to row could be helpful:

<div class = "row" style="display: flex;align-items: center;">
    <div class = "col-md-8">
        <h3><%= link_to item.title, item , id: "font-colour" %></h3>    
        <p><%=  if item.description.length > 70
                    item.description[0..70].gsub(/\s\w+\s*$/, '...')
                else 
                    item.description
                end
        %></p>  

    </div>     

    <%= link_to complete_item_path(item), id: "font-colour", method: :patch do %>
        <i class="fa fa-square-o fa-2x align-center"></i>
    <% end %>

    <div class = "col-md-1">
        <%= link_to item_path(item), id: "font-colour", method: :delete do %>
            <i class="fa fa-trash fa-2x align-center"></i>
        <%end%>
    </div> 
</div>

Bootstrap icon misalignment

1 Answers1