Alignment issues with Bootstrap icons

I am attempting to line up my text with an icon. I have researched various methods on a website for help.

Here is the current state of my project

This is the code I am currently using:

<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>

Answer №1

Consider adding

display: flex;align-items: center;
to the row element for improved alignment:

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the height of the container to accommodate responsive images automatically

Hello, I am trying to make the container height adjust automatically based on the responsive image it contains. The container's display is set to flex and the image is positioned between two divs with the class "text-block". These divs have a width of ...

AngularJS field array

Is it possible to create an array that contains references to the fields in a form (such as input, textarea, etc.) and then run a function on them in my code, like addClass()? To clarify my objective - I am looking to add a red border color to any invalid ...

Modify The Source Code of an Image

HTML Markup <img class="blog-picture ul-normal-classic" src="https://example.pk/wp-content/uploads/2020/12/example300-300x203.jpg" alt="Beintehaa300"> What I'm Looking For: <img class="blog-picture ul-norma ...

Obtaining a User's Username from a User ID Using Active Record

I am facing a situation where I have two classes in my Ruby on Rails project: class User < ActiveRecord::Base has_many :posts end class Post < ActiveRecord::Base belongs_to :user end This is how my database schema looks like: ActiveRecord::Sc ...

Ways to resolve incorrect URL that interfere with date search results

I'm currently developing a webpage that displays user data in a table using bootstrap and PHP Laravel. It features search functions by date and name, a form control for selecting the number of entries per page, pagination buttons, and other miscellane ...

What is a practical method for achieving a double-lined border effect?

Here is what I am referring to (with two different colors): I had to create two span divs and apply a border-right on one and a border-left on the other as my solution. However, I believe there must be a more efficient way to do this with less code. HTML ...

Toastr service experiencing issues on Internet Explorer browser

While implementing toastr notifications in my Angular application, I encountered an issue with compatibility across browsers. Specifically, the ngx-toastr module functions properly in Chrome and Firefox, but not in Internet Explorer. Interestingly, it wo ...

Is there a way I can toggle between nav-pills and nav-stacked based on varying screen sizes?

Can someone help me with a solution to switch between nav-stacked nav-pills for mobile and non-nav-stacked nav-pills for other devices using Bootstrap? For instance, on a desktop: <nav> <ul class="nav nav-pills"> <li role="presentat ...

Is there a way to adjust the color of the checkbox?

After creating a show/hide toggle checkbox for a password input, I ran into an issue with changing the background color when it is checked. Our current code base includes a custom styled checkbox, but it lacks the ng-model needed for this particular featur ...

How can we ensure an image fills up the entire screen while still being contained within a Bootstrap 4 container?

I have a unique setup on my Wordpress page template. The content from the parent template is displayed first, followed by the content of child templates, including featured images. I want the content to appear in the container class, while the featured ima ...

React Native CSS Triangles not functioning anymore

I'm currently developing an application that involves triangles overlaying other containers and divs. This issue was previously resolved using CSS with the following code: .triangle:after { content: ""; display: block; position: absolu ...

Challenges with handling Ajax responses in Ruby on Rails

I'm currently facing an issue with the Ajax response in my Rails application, and I'm unsure of how to troubleshoot it. Here is the code that is functioning correctly: View <div id="<%= dom_id(comment) %>_count"> <%= Like.wh ...

Issue with the display of images

Is there a way to make a pop up image visible when hovering or clicking on an image on the webpage? Currently, the new pop up image is hidden behind the right div. Thank you in advance for any help. Paul ...

Issue with non-responsive images in Bootstrap 3

Here is the bootstrap configuration that I am currently using: http://www.bootply.com/118172 I'm having an issue with the responsiveness of the image. It's not shrinking to match the height of the div on the left side. Can anyone help me trouble ...

"I am experiencing an issue with my Bootstrap 4 carousel where images are not

While the navigation seems to be functioning properly, the carousel is causing frustration to the point where I want to smash my laptop. The carousel is not displaying images; instead, it only shows three sliding dots when using bootstrap 4.1.2. <!d ...

Conceal default video player controls in Google Chrome

I have a dilemma with hiding the default play button in the center of my video. Even though I have a custom play button, the native play button is still showing underneath it on tablets and mobile devices. Unfortunately, I am unable to access the CSS for i ...

Has anyone created a modified version of jRails that is compatible with Rails 2.3 and jQuery 1.4?

We are revamping a website with Rails, and the current site heavily relies on jQuery v1.4 in its templates. We want to ensure that the existing scripts continue to function while also utilizing Rails' javascript helpers for our new scripts. While jRai ...

Error encountered when attempting to call a JavaScript function by clicking on a link within a dropdown menu due to an unexpected end of

Here is the code snippet from my HTML file: <html> <head> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/boots ...

Is less.js capable of compiling CSS code that is compatible with all browsers?

Is there a simple way to convert my Less code into browser-compatible CSS like the example below? #grad1 { background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, blue); /* For Opera 11.1 to ...

Getting the most out of fonts with Webpack sass-loader

I recently set up a custom font in my project like this: $font-path: '~@/assets/fonts/'; @font-face { font-family: 'mainFont'; font-weight: 300; font-style: normal; src: url('#{$font-path}mainFont/mainFont.eot&apos ...