How to line up Font Awesome icons both horizontally and vertically in Bootstrap 4

I am currently facing a challenge with aligning a Font Awesome icon horizontally and vertically within Bootstrap 4. I am aiming to achieve this using only the built-in CSS provided by Bootstrap 4, without the need for any custom CSS.

While I have been successful in centering the icon vertically using align-self-center, I am encountering difficulties with horizontal alignment. Despite using justify-content-center, the icon remains left-aligned.

  <div class="row">
    <div class="col-6">
      <h2 class="text-left">Heading 2</h2>
      <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan sit amet augue eu suscipit. Maecenas rutrum, mauris nec porta euismod, ligula augue facilisis purus, non ultricies mi nulla lacinia velit. Ut vitae varius odio, vel pharetra nisi. Nam porta, ex eu ornare sollicitudin, erat erat elementum ligula, aliquet commodo.</p>
      <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan sit amet augue eu suscipit. Maecenas rutrum, mauris nec porta euismod, ligula augue facilisis purus, non ultricies mi nulla lacinia velit. Ut vitae varius odio, vel pharetra nisi. Nam porta, ex eu ornare sollicitudin, erat erat elementum ligula, aliquet commodo.</p>
    </div>

    <div class="col-6 align-self-center justify-content-center">
      <i class="far fa-thumbs-up fa-10x"></i>
    </div>
  </div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

consider using text-center in place of justify-content-center

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" >


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
    <div class="col-6">
      <h2 class="text-left">Heading 2</h2>
      <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan sit amet augue eu suscipit. Maecenas rutrum, mauris nec porta euismod, ligula augue facilisis purus, non ultricies mi nulla lacinia velit. Ut vitae varius odio, vel pharetra nisi. Nam porta, ex eu ornare sollicitudin, erat erat elementum ligula, aliquet commodo.</p>
      <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan sit amet augue eu suscipit. Maecenas rutrum, mauris nec porta euismod, ligula augue facilisis purus, non ultricies mi nulla lacinia velit. Ut vitae varius odio, vel pharetra nisi. Nam porta, ex eu ornare sollicitudin, erat erat elementum ligula, aliquet commodo.</p>
    </div>

    <div class="col-6 align-self-center text-center">
      <i class="far fa-thumbs-up fa-10x"></i>
    </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

Using jQuery, prevent the user from entering text into an input box when a checkbox

In my project, there is a checkbox that determines whether an input box is disabled. The issue arises when I try to disable the input based on the database value. For example, when the value is 0, it should display as disabled false; however, the input rem ...

javascriptjqueryhtmlajax

Identifying Equivalent Connections

Currently, I have a collection of link URLs obtained from a recent web crawl. As I delve into developing a visualization/path finding suite, I've encountered an issue with the dataset. Due to the fact that the website I crawled was created by humans, ...

javascripthtmlurlhyperlink

Change the class name using jQuery when scrolling

Currently utilizing bootstrap as my primary css framework. My goal is to dynamically toggle a class on the navbar once the user scrolls past the prominent header image located at the top of the website. UPDATE: Admitting I made an error and had a momenta ...

javascriptjquerytwitter-bootstrap

Ways to enhance the visibility of the active menu item background

Is there a way to customize the background color of an active menu item in Bootstrap 5 dropdown menus to look similar to Windows desktop applications? https://i.sstatic.net/VHmD04th.png Here is the code for creating a Bootstrap 5 dropdown menu, also avai ...

htmlcsstwitter-bootstrapdrop-down-menubootstrap-5

Automate web tasks with C# WebBrowser

Currently, I am in the initial phases of developing a system to automate the process of data extraction and collection from a website. I have a massive CSV file containing 16,000 lines of data. My goal is to input data from each line into a textarea on a w ...

c#html.netwebautomation

Implement a feature in JS/HTML where clicking on a button shifts a specific section of a row from one table to another while simultaneously deleting the remaining

I am facing an issue with two tables - addFriends and existingFriends. The addFriends table contains a button in the fourth column, which, upon clicking, should delete the corresponding row from that table and add it to the existingFriends table. Currentl ...

javascripthtmlcss

CSS smoothly scrolls upward within a set height restriction

Is there a way to use CSS to ensure that the scroll bar of a fixed-height message box is always at the bottom, displaying the latest entry? Currently, as more messages populate the chat box main section, everything inside remains static. The only way to v ...

css

Tips for validating multiple email addresses in Kendo UI

I provided a similar code structure <td> <label for="email" class="required">To:</label></td> <td><input type="email" id="email" name="Email" class="k-textbox" placeholder="e.g. <a href="/cdn-cgi/l/email-protect ...

htmlkendo-ui

Wireless web platform/program

I have been tasked with creating an app that will display real-time power data from a website. The challenge is that I do not have access to the backend of the site, which means I am unable to use PHP protocols to pull the data into my app. I attempted to ...

phphtmlmobilesmartphone

Efficiently Managing Forms with SharePoint Online

Recently, I created a basic HTML/PHP form that collects input data and generates a company-approved email signature in HTML format. The form simply captures the information entered by users and displays it in the signature layout. Check out the form below ...

javascripthtmlformssharepointsharepoint-online

Struggling to vertically align elements within iron-pages

Struggling to vertically center the content within iron-pages (nested in a paper-drawer-panel). Check out the code snippet below: <paper-drawer-panel id="drawerPanel" responsive-width="1280px"> <div class="nav" drawer> <!-- Nav Conte ...

javascripthtmlcsspolymerpolymer-1.0

There seems to be an issue with the CSS header alignment as the logo is not properly positioned using a top margin of -20px

My goal is to create a header bar that includes an image, a title, and a menu car. I want the bar to be displayed after scrolling 50px down, and I also want the image to be positioned slightly above the wrapping div, showing a bit of it in the top 50px. Ri ...

css

Angular 2 is all about managing validation messages within controls

I'm currently facing challenges with getting validation messages to display properly in Angular 2. The frequent updates to Angular 2 have made it difficult to find a simple and effective solution online, so please refrain from marking this as a duplic ...

javascripthtmlangular

Tips for incorporating material-ui icons into the column component of a data-grid component

I am currently working with the material-ui data-grid and I would like to display Edit icons from material-ui next to each row. Unfortunately, the data-grid does not provide any props specifically for this purpose. Below is the code snippet: import React ...

javascripthtmlreactjsdatagridmaterial-ui

How about linking together CSS3 animations?

Incorporating various classes to animate different elements on my webpage has been my latest project. On page load, I use addClass with jQuery to include these classes. I've been contemplating if there is a method to chain this process. For example, ...

jquerycss

Displaying videos in Vue js with full width and height is not working as expected

I am trying to create something similar to this: https://i.sstatic.net/R8VEy.png However, the video does not display in full height and width. Instead, it appears cut off at the edges and I cannot see the controls. I want the video to cover 100% of the ...

htmlcssvue.jssass

I'm curious if there is a specific jQuery event that triggers right before an element loses focus or right before the next element gains focus

I am facing a situation where I have two input elements in a form that are closely connected. The first element triggers an ajax call to check for existing data in the database when the user tries to move away from it, while the second element opens a moda ...

javascripthtmljqueryfocusblur

The data retrieved from the API call is outdated

I am struggling with a weather web API that is only showing old data when called in the code. However, when I enter the API URL directly into the browser, it displays the most up-to-date information for the current city. Can anyone help me troubleshoot why ...

javascriptjqueryhtmlajaxapi

Create a custom overlay for an image that is centered horizontally and does not have a fixed width

I'm working with this HTML setup: <div class="container"> <img class="image" /> <div class="overlay"> <div class="insides">more content here</div> </div> &l ...

javascripthtmlcssimageoverlay

What is causing my HTML to not recognize my Angular JS code?

Trying to dive into Angular JS, I wrote a small piece of code but for some reason, the HTML is not recognizing Angular JS. This is my index.html file: <!DOCTYPE HTML> <html ng-app="store"> <head> <link rel="stylesheet" type=" ...

javascripthtmlangularjs