Aligning a floated element vertically in a list using Bootstrap 4

Is there a way to align a fontawesome icon to the right while keeping it vertically centered? I've attempted using ml-auto and Flexbox, but haven't had any success.

Below is the code snippet:

<ul class="list-group flex-column">
  <li class="list-group-item py-2 d-flex justify-content-start">
    <a href="#">
      <img src="https://placehold.it/40x40" height="40" class="mr-4">
      <span>Text Here</span>
      <i class="fa fa-angle-right ml-auto" aria-hidden="true"></i>
    </a>
  </li>
</ul>

If anyone has a solution, I would greatly appreciate your help. Thank you!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Utilize the flex and sizing helper classes to transform the link into a flex parent with 2 children - one for the content you want on the left, and the other for the content on the right. Employ 

.justify-content-between, .align-items-center
to arrange the content so that the arrow appears on the right and is centered vertically.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group flex-column">
  <li class="list-group-item py-2 d-flex">
    <a href="#" class="d-flex w-100 justify-content-between align-items-center">
      <span>
      <img src="https://placehold.it/40x40" height="40" class="mr-4">
      <span>Text Here</span>
      </span>
      <i class="fa fa-angle-right ml-auto" aria-hidden="true"></i>
    </a>
  </li>
</ul>

Answer №2

Take a look at this recommended structure:

<ul class="list-group">
  <li class="list-group-item">
    <a class="w-100 d-flex align-items-center py-2" href="#">
      <img src="https://placehold.it/40x40" height="40" class="mr-4">
      <span>Text Here</span>
      <i class="fa fa-angle-right ml-auto" aria-hidden="true"></i>
    </a>
  </li>
</ul>

Feel free to click here to see it in action on jsfiddle.

The <a> tag needs to occupy the entire parent for the ml-auto effect on the icon to be visible. Additionally, remember that d-flex should be within the a tag, not the li.

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

What is the best way to make a hyperlink in HTML open in the same page or window, without relying on the <iframe> tag or JavaScript?

I have two html files and one css file. My question is how to open the link monday.html on the same page or window in my content section. For example, when someone clicks on the Monday navigation button, I want the result to show up in the content section ...

htmlcssiframe

Scroll horizontally on a webpage using drag with JavaScript

I have been working on a unique horizontal website design that allows users to scroll horizontally by dragging the screen. I managed to successfully implement the horizontal scrolling feature, but I am facing difficulties in adding the horizontal drag-to-s ...

javascripthtmljquerycss

Scroll to make the div slide in from the bottom

I'm trying to achieve a similar effect like the one shown in this website (you need to scroll down a bit to see the divs sliding in). Although I'm not very proficient in JS, I was able to create a code that makes the divs fade in from 0 opacity ...

javascriptjqueryhtmlcss

Utilize Javascript to generate intricate table headers based on JSON data

I am currently facing a challenge in creating an HTML table header with colspan. I have a JSON object as follows: var metadata = [{ "colIndex": 0, "colType": "String", "colName": "PM" }, { "colIndex": 1, "colType": "String", "colName": "PR ...

javascriptjqueryhtmljson

I'm encountering an issue where it appears that my ajax method may not be effectively communicating with my webservice

I am currently working on calling a webservice using an ajax request with the intention of retrieving clinical cases within a specific date range (for example, between 2015-01-01 and 2016-06-08). The webservice functions perfectly when tested individually. ...

jqueryhtmlsqljsonajax

I am having trouble getting my JavaScript to load

I've hit a roadblock trying to understand why my JavaScript code isn't executing properly. Could someone kindly point out what I may have overlooked? :( JSFiddle Link HTML Snippet <div class="po-markup"> <br> <a href="# ...

javascriptjqueryhtml

How can you make a select list appear or disappear based on the selection made in another select list?

I currently have a select list set up like this: https://i.sstatic.net/o730z.png What I would like to achieve is for the second select list to only appear once a selection or change has been made in the first select list. Additionally, when a selection o ...

javascriptjqueryhtmlshow-hideselectlist

Toggle the visibility of a Div element using PHP and jQuery

I am attempting to create 3 buttons that, when clicked, display the content of a PHP file. Here is what I have done so far: In the main HTML file: <div class="buttons"> <a class="showSingle" target="1">Logg</a> <a class="showSingle ...

phpjqueryhtmlsql-serverajax

Using JQuery to append elements and then locate them with the find method does not produce the expected

Hey there, I'm having trouble inserting one DOM element into another. It's something I've done many times before successfully, but for some reason it's not working this time and I can't figure out why. Currently, I am using an Aja ...

javascriptjqueryhtmlcssajax

Various HTML origins

Upon examining the page source, I noticed that it contains JavaScript code: <script language="javascript" type="text/javascript"> styling += 'ul#topnav a.tabHeader5'; styling += '{'; ...

javascriptcssseleniumselenium-rc

When trying to load TinyMCE via AJAX, it fails to appear on the page

My dilemma involves two pages - page1 and page2. On page2, there is a Tinymce initialization setup as follows: $(document).ready(function(){ tinymce.init({ selector: "textarea", theme: "modern" }); }) ...

javascriptjqueryhtmlajax

What effect does setting div1 to float left have on the layout of div2 in css?

Behold the mystical code written in HTML. <div id="sidebar1"> sidebar1 </div> <div id="sidebar2"> sidebar2 </div> Beneath lies the enchanting CSS code for the aforementioned HTML structure. div { width: 100px; ...

htmlcss

Tips for utilizing ajax and jquery to transmit an array/List. The resource loading issue may arise due to server responding with a status of 415

I am a beginner when it comes to using Jquery Ajax, and I am attempting to send an array via post in the following manner. $(function(){ $("#btnSave").click(function(){ var dataToSend = new Array(); $("# ...

htmljqueryajaxasp.net-mvc

Using CSS sprites to style text links

I've been attempting to incorporate an image with various icons for text links in an unordered list, but I can't seem to display just one icon with some space next to it for the text. The code I have so far is: http://jsfiddle.net/XyVtq/2/ This ...

htmlcss

Trigger the oninput event using jQuery

I am using an oninput event on a textarea to dynamically adjust its height based on user input. However, I've encountered an issue when trying to edit the value programmatically using jQuery's val() function: it does not trigger the oninput event ...

javascripthtmljqueryeventsdom-events

Press one button to activate another button

I am looking to activate a button's class by clicking on another button. The button I have is: <button class="clear-cart banner-btn">clear cart</button> This button is used for clearing a cart. On the order confirmation page, I click on ...

javascripthtmlbutton

There is no data in the Uint8Array derived from the ArrayBuffer

I've been working on a program to process files, and I need to convert the array buffer of the file into a Uint8Array. However, when I run my code, the array appears to be empty. The specific array I'm trying to access is the fdata array. PLEASE ...

javascriptarrayshtmlhtml5-canvasarraybuffer

The React-bootstrap components lack predefined styles

I have been working on a web application using react.js, react-router, and webpack. I wanted to style it using react-bootstrap for the navbar, but it seems that my navbar is not getting styled properly as shown in the documentation here Here is the react- ...

csstwitter-bootstrapreactjswebpackreact-bootstrap

Create a JavaScript button that redirects to a different page within a React application

I am creating a div element using a for-loop and I want to link each div to the "/campaign" page with its respective id. When a div is clicked, I want it to navigate to the "/campaign/id" page and pass the id to the Campaign component. class Home extends ...

javascripthtmlreactjsreact-router

The use of the CSS property overflow:hidden results in certain child components being hidden, even when moved back into the visible

At the top of my screen, I have a message box banner styled as follows (I'm using React + Material UI): style={{ display: "flex", flexDirection: "row", justifyContent: "flex-start", textAlign: "left ...

javascripthtmlcssreactjscss-animations