Tips for aligning a Font-Awesome icon vertically centered with a line of text in Bootstrap 4

My goal is to vertically center a Font Awesome icon next to a small block of text. To better illustrate, here is a reference image of what I am aiming for: This is the visual I aspire to achieve

The section of my website that I am currently fine-tuning can be viewed here: This is the current output of my code. Please note the misaligned FA icon , specifically, the code snippet provided below pertains to the right side (column 2):

<div class="col-12 col-md-6 col-lg-5">
  <h4 class="text-center ">Honors and Awards</h4>
  <i class="fa fa-trophy fa-lg" aria-hidden="true"></i>
  <h5 class="text-center"> Boy Scouts of America Eagle Scout Rank</h5>
  <h6 class="text-center"> The Highest Rank in Scouting</h6>
  <h6 class="text-center"> April 2014 </h6>
</div>

Answer №1

The current layout is a result of using block level elements (h tags) for all the elements. To align them as desired, one option is to position them relative to the left or insert them within one of the headings.

It's worth noting that using multiple heading elements in this way is not the most appropriate approach.

An alternative solution could be to use a regular list or a DL (definition list) and apply the icon as a :before element on the left. By using a DL, you can easily add new awards with associated descriptions and have more control over the styling of each element.

I've also assigned classes to the DTs for different icons and added a description class to the DDs for specific styling of the content per award.

Regarding the request for spinning icons, I have included CSS lines to achieve this effect:

  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;

This solution was inspired by @SatAj's answer on a related question at Stack Overflow.

Keep in mind that the spinning animation may not work on older browsers like IE8, but should be compatible with most modern browsers. Additionally, not all Font Awesome icons may look aesthetically pleasing when spinning.

dl {margin-left: 40px}

dt {font-size: 1.6em;position:relative;}
dt:not(:first-of-type) {margin-top: 2em}

dt:before {
    content: ""; 
    font-family: FontAwesome;
    left: -40px;
    position:absolute;
    top: 5px;
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
 }
 
 dt.achievement:before {
    content: "\f091"; 
 }
 
  dt.academic:before {
    content: "\f19d"; 
 }
 

dd {margin-left: 0}
dd.description {font-size: 1.3em;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<h2>Honors and Awards</h2>

<div class="col-sm-12 col-md-6 col-lg-5">
  <dl>
    <dt class="achievement">Boy Scouts of America Eagle Scout Rank</dt>
    <dd class="description">The Highest Rank in Scouting</dd>
    <dd>April 2014</dd>
    
    <dt class="academic" >Principles Academic Award</dt>
    <dd class="description">The greatest achievement in academia</dd>
    <dd>June 2017</dd>
  </dl>
</div>

Answer №2

To utilize Bootstrap 4's efficient grid system, the strategy involves placing the icon in a smaller column on the left side, while the text occupies a corresponding column on the right side.

  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6 col-lg-5">
        <div class="row">
          <div class="col-2">
            <i class="fa fa-trophy fa-lg" aria-hidden="true"></i>
          </div>
          <div class="col-10">
            <h4 class="text-center ">Achievements and Accolades</h4>
            <h5 class="text-center"> Eagle Scout Rank - Boy Scouts of America</h5>
            <h6 class="text-center"> The Highest Rank in Scouting</h6>
            <h6 class="text-center"> April 2014 </h6>
          </div>
        </div>
      </div>
    </div>
  </div>

An interactive demonstration is available here: http://jsbin.com/yejufib/edit?html

For a more streamlined approach, consider exploring this Bootstrap component tailored for such purposes: https://getbootstrap.com/docs/4.0/layout/media-object/

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

How to enable seeking functionality for mp3 files with PHP

I have implemented the following PHP script: video tags are unable to extract metadata from it. Any insights on where I might be going wrong and how to rectify this situation? Your guidance would be greatly appreciated. Thank you.</p> ...

How can I display multiple images in a single row using PHP echo?

I am struggling with my PHP code that displays images from a database. The issue I'm facing is that the images are all appearing in a single column, but I want them to be displayed in one row so that users can scroll horizontally to view them. How can ...

Storing information in a database

Need help troubleshooting why my form isn't saving data to the database. <div class="container"> <div class="row" style="margin-top:200px;"> <form ENCTYPE="multipart/form-data" ACTION="upload.php" METHO ...

Why is the updated index.html not loading with the root request?

I'm currently working on an Angular app and facing an issue with the index.html file not being updated when changes are made. I have noticed that even after modifying the index.html file, requests to localhost:8000 do not reflect the updates. This pro ...

The picture within the div is not appearing as expected

I am facing an issue with inserting an image in a div container using CSS and HTML. The image is not displaying properly. Here is the HTML code: <div id="wrapper"> <div id="quoteContainer"> <span class="start_img"></span> </di ...

Choose a procedure to reset to the original setting

I'm attempting to achieve something that seems straightforward, but I'm having trouble finding a solution. I have a <select> tag with 5 <option> elements. All I want to do is, when I click a button (which has a function inside of it), ...

handling a radius variable across various stylesheets in SASS

Recently, I started using SASS and I am very impressed with this tool. However, before diving in further, I have one question that I can't seem to find the answer to. What is the best approach for managing a variable value across multiple style sheet ...

How can I establish default values for 2 to 3 options in a Dropdownlist?

Is there a way to set two values as default in a dropdown list, and when the page is refreshed, the last two selected values are retained as defaults? Thanks in advance! Visit this link for more information ...

the php renderer fails to take into account the styles

Trying to convey this as clearly as possible. I have the variables below: $name = main channel and $childs = sub channels. When I remove the childs from the HTML, only the main channel shows up - which is expected. However, when attempting to style the su ...

Eliminating gaps between elements

I recently delved into the world of web design, and although I have a basic understanding of HTML and CSS, I am determined to enhance my skills and knowledge by creating a standard home page. So far, I managed to create a standard navigation bar, and now ...

I am wondering how to use the value assigned to a variable's textContent as an argument for player input in my JavaScript code

i am currently developing a JavaScript project to create a user interface for my rock, paper, scissors game. Currently, the game only runs in the console and prompts the player for input. So far, I have implemented three buttons (one each for rock, paper, ...

Arrangement of HTML divs and styling classes

I have been experimenting with divs and classes in order to achieve proper alignment of text on my website. Currently, I am working with 2 classes that I would like to display side by side to create 2 columns. However, the right column containing the text ...

Retrieve all text within a <div> element excluding the content within an <h5> tag using XPath

I have been researching and experimenting with different solutions for the issue at hand, but unfortunately, none of them have proven successful so far. Here is the HTML code that I am working with: <div class="detalhes_colunadados"> <div clas ...

Retrieve all choices from dropdown menu using a POST request

I'm working on a page that includes two select boxes. I need to transfer items from Select #1 to Select #2. After clicking the submit button, I want to retrieve all options from Select #2, regardless of whether they are selected or not. <?php req ...

Utilizing CSS to create a zoom effect on hover for an image while preserving its original size was successful, however, the issue arises as only a corner of the image is visible

On my webpage, I have implemented an image that zooms in slightly when hovered over. Unfortunately, this animation has caused the image to only display one part regardless of whether hover is activated or not. I've attempted to troubleshoot by adjusti ...

Angular's ng-disabled feature seems to be experiencing a delay in functionality

While editing the file, I have the ability to modify the filename and add additional files for versions. Once a file has been chosen, the filename edit field should be disabled immediately. Despite attempting the following code, the field remains enabled u ...

Displaying iFrame Border in React Native WebView

When attempting to dynamically add YouTube videos to my React Native app, I decided to utilize a combination of WebView and iFrame due to the incompatibility of the current react-native-youtube component with RN 16+. Although this solution works, the ifram ...

Choosing comparable choices from the drop-down menu

I am working on a dropdown menu that contains different options. I need to use jQuery to automatically select the option that corresponds to the branch of the currently logged in user. However, when some option text is very similar, it causes an issue. // ...

Challenges faced with Vuetify's vertical and non-linear stepper components

I've been struggling to grasp the concept of Vuetify's stepper feature. Despite my efforts, I haven't been successful in combining different steppers from their page that each have elements I need but lack others. One example is this one on ...

Restricting the number of times a user can click on

I am currently displaying a table with data obtained from a database query. The structure of the table is outlined below: <table id="dt-inventory-list" class="table table-responsive"> <thead> <tr> <th>Field ...