Incorporating directional indicators to a Bootstrap 4 table

I'm having trouble aligning Font Awesome sort icons to the right side of a table cell. I've tried using ml-auto but it's not working as expected.

What I need help with is getting those arrows aligned properly on the right side of the cell.

Any assistance you can provide would be highly appreciated.

Live Code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<div class="table-responsive shadow p-3 mb-5 bg-light rounded">
  <table id="grid" class="table table-hover sortable">
    <thead class="thead-dark">
      <tr>
        <th data-type="string">?</th>
        <th data-type="string"><i class="fas fa-sort text-right"></i>Socre:</th>
        <th data-type="number"><i class="fas fa-sort text-right"></i>Age:</th>
        <th data-type="number"><i class="fas fa-sort text-right"></i>Student:</th>
        <th class="wfixed" data-type="string">Status:</th>
      </tr>

    </thead>
  </table>
</div>

csstwitter-bootstrapbootstrap-4

Answer №1

Is it possible to reposition them within the markup? If yes, simply shift them to the opposite side of the text.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<div class="table-responsive shadow p-3 mb-5 bg-light rounded">
  <table id="grid" class="table table-hover sortable">
    <thead class="thead-dark">
      <tr>
        <th data-type="string">?</th>
        <th data-type="string"></i>Score:<i class="fas fa-sort text-right"></th>
        <th data-type="number"></i>Age<i class="fas fa-sort text-right">:</th>
        <th data-type="number"></i>Student:<i class="fas fa-sort text-right"></th>
        <th class="wfixed" data-type="string">Status:</th>
      </tr>

    </thead>
  </table>
</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

How can I effectively summon a modal dialog in ASP.NET MVC utilizing the Twitter Bootstrap framework?

Recently, I started incorporating Twitter's Bootstrap toolkit into my latest project and I found myself wondering about the optimal method for utilizing the modal dialog in ASP.NET MVC3. Should I create a Partial with the modal's markup and then ...

c#jqueryasp.net-mvc-3twitter-bootstrap

I have noticed that the brand section of the navigation bar changes to black when I hover over it, but I have been unable to locate any

I'm currently working on a Rails application that has a navbar-top with a brand element. However, I've encountered an issue where the background of the brand element turns black when I hover over it. Despite inspecting the browser console, I coul ...

cssruby-on-railstwitter-bootstrap-rails

What improvements does IE7 offer compared to IE6?

Many developers in the web development industry often express frustration when it comes to developing for IE6. But when working with a powerful JavaScript framework such as jQuery, does the process of developing for IE6 differ significantly from that of ...

javascriptcssinternet-explorer-6internet-explorer-7

Struggling to figure out why BXSlider won't cooperate

I'm struggling to make BXSlider work on my website. Here is the code I have used. The JS/CSS files are properly linked and downloaded from the site with correct paths. $(document).ready(function(){ $(document).ready(function(){ $('.bx ...

javascriptjquerycss

Creating a CSS scrollbar that mimics touchscreen behavior by allowing all text to be movable

The touch apps I developed work great in kiosk mode on HD-sized screens in fullscreen using Chromium. Now, I want to showcase the site to individuals who want to check the content and functionality. I can recommend that they use Chromium's dev mode, ...

htmlcss

Unraveling CSS inheritance: A guide to overriding inherited styles

I need to make some adjustments to a WordPress template. One of the changes is to set the background color of an element to transparent. The wrapper div, which has the background color applied to it, contains many nested child divs that all inherit that co ...

cssinheritancecolorsnested

What is the method to add gutters in Material UI grid without including margins?

I've been struggling for ages to make my responsive layout work properly! Whenever I add spacing to the Grid container with class=spotlight, things get misaligned. How can I add spacing to the gutters (the space between Grid items within the spotlight ...

cssreactjsmaterial-ui

The 'ImgOverlay' component is defined in the 'React-Bootstrap' library, but it is not being utilized anywhere in the code

Hey there, I recently experimented with react-bootstrap and attempted destructuring using { Card,ImgOverlay,Title,Text }. However, I encountered an issue where only 'Card' was successfully used, while the others resulted in the following error: ...

reactjsbootstrap-4react-bootstrap-table

Displaying PDF files on the internet without allowing them to be downloaded

How can I display PDF files on my website without allowing them to be saved or downloaded? Is there a way to prevent browsers from saving or downloading the PDF files? ...

phpjavascripthtmlcss

Troubleshoot: Problem with iPhone Orientation on Bootstrap Framework

While working on a responsive website design, I encountered an issue that needs addressing. Initially, switching from portrait mode to landscape didn't trigger the expected responsive behavior; instead, it simply zoomed into the site. To prevent this ...

htmlcsstwitter-bootstrap

What is the best way to include a hyperlink in a component?

Is there a way to link this code snippet: <Col key = {item.id}> <StoreItem {...item}/> </Col> to redirect to the following route? <Route path = '/' element = {<Home />} /> Here is the source co ...

reactjstypescriptbootstrap-4

The navigation bar vanishes as soon as I click the Modal button

I am experiencing an issue where the Navbar disappears when I open a modal while using Bootstrap. Navbar before opening Modal https://i.stack.imgur.com/Oo9qb.png Navbar after opening Modal https://i.stack.imgur.com/dlK1V.png <script src="https:// ...

htmlcssnavbarbootstrap-5bootstrap5-modal

Issue with functionality of Bootstrap 4 Checkbox accordion

I am trying to achieve something similar to this example: https://getbootstrap.com/docs/4.0/components/collapse/#multiple-targets Instead of using a button, I want to use a checkbox. I want the collapse effect to occur when the checkbox is checked. < ...

javascriptbootstrap-4

Memory Match: Picture Edition

In this memory game, letters are used. I had considered changing it to a picture-based game, but I faced difficulty in generating images and incorporating them into the array. <script> var memory_array = ['A', 'A', 'B&ap ...

javascripthtmlcss

Combining the p class with flexbox for optimal layout design

I have four flexed container boxes and I am looking to add text below them in a row. Does anyone have suggestions on how I can achieve this alignment, as well as tips for optimizing the code? .container { display: flex; flex-direction: row; just ...

htmlcsstextflexbox

"Seamlessly transition between items in a ng-repeat loop

My list of names in the scope is pretty straightforward: $scope.friends = [ {name:'John'}, {name:'Jessie'}, {name:'Johanna'}, {name:'Joy'}, {name:'Mary'}, {name:'Peter'}, ...

cssangularjsng-animate

Using jQuery to Implement Car Turn Signals (Blinkers)

Recently, I've been faced with an unusual challenge. I need to incorporate car turning lights functionality into my website. Specifically, I have to create a scenario where clicking either the left or right button triggers the corresponding green arro ...

javascriptjqueryhtmlcssjquery-effects

Struggling with incorporating elements into a dynamic CSS3 banner design?

Struggling to add up to 10 text items to the CSS3 animated banner. Having difficulty getting the items to display properly. I'm curious if there is a simpler way to achieve this with animations as shown in this example: http://jsfiddle.net/zp6B8/1/ & ...

javascriptjqueryhtmlcss

Slippery carousel: Showcase all items in center alignment mode

Currently, I am implementing Slick Carousel with centerMode. Is there a method to ensure that all items are displayed without being cut off on the screen? The setup I have is quite simple: $('.your-class').slick({ centerMode: true, slidesTo ...

jquerycssslick.js

Scrapy and xpath not functional - solely relying on css for operation

Attempting to scrape data from this website: After retrieving all elements using the following code: products = response.xpath("//ul[@class='products']//ancestor::li") I attempted to extract prices for all elements in the scrapy shell ...

cssxpathscrapy