Position some content at the top right of a table cell using Bootstrap 4

I am trying to customize a Bootstrap 4 table with 2 columns. Specifically, I want to align some text in the right column to the right while keeping the rest of the text left-aligned within the same cell.

Below is the code for my table:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
  <tr>
    <td width=20%>SKU:</td>
    <td width=80%>PM432523
      <div class="text-right">On Special</div>
    </td>
  </tr>
  <tr>
    <td>Supplier:</td>
    <td>Acme Meat Inc</td>
  </tr>
</table>

I have attempted to align the "On Special" string to the right and on the same line as the SKU value by experimenting with different tags but have not been successful. I am unsure if this alignment is achievable or if there is an alternative solution to achieve the desired layout?

htmlcssbootstrap-4

Answer №1

To make this adjustment, simply replace the following:

<div class="text-right">On Special</div>

with

<div class="float-right">On Special</div>

You can see the revised code below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
  <tr>
    <td width=20%>SKU:</td>
    <td width=80%>PM432523
      <span class="float-right">On Special</span>
    </td>
  </tr>
  <tr>
    <td>Supplier:</td>
    <td>Acme Meat Inc</td>
  </tr>
</table>

Answer №2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
  <tr>
    <td width=20%>SKU:</td>
    <td width=80%>PM432523
      <span style="float: right;">On Special</span>
    </td>
  </tr>
  <tr>
    <td>Supplier:</td>
    <td>Acme Meat Inc</td>
  </tr>
</table>

Answer №3

.content {
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table table-striped table-hover">
  <tr>
    <td width=20%>ID:</td>
    <td width=80%>ABC12345
      <div class="content">New Arrival</div>
    </td>
  </tr>
  <tr>
    <td>Manufacturer:</td>
    <td>XYZ Electronics</td>
  </tr>
</table>

Answer №4

Make a simple modification to this snippet of code :

<div class="text-right">On Special</div>

By changing it to :

<div style="float:right;">On Special</div>

Answer №5

To get started, consider implementing something along these lines.

.align-right {
display: inline;
position: absolute;
right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
  <tr>
    <td width=20%>Product Code:</td>
    <td width=80%>AB12345
      <div class="align-right">Limited Time Offer</div>
    </td>
  </tr>
  <tr>
    <td>Vendor:</td>
    <td>Best Deals Co.</td>
  </tr>
</table>

Answer №6

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
  <tr>
    <td width=20%>SKU:</td>
    <td width=80%>PM432523
      <span class="float-right">On Special</span>
    </td>
  </tr>
  <tr>
    <td>Supplier:</td>
    <td>Acme Meat Inc</td>
  </tr>
</table>

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

Methods for creating drop-down navigation menus with a dark gradient instead of the traditional white styling

Can a custom style or class be used to transform a plain white nav drop down menu into a gradient tooltip similar to the one from Bootstrap shown in this link: http://www.bootply.com/68688? (hover over the link) If possible, how can this transformation be ...

csstwitter-bootstrap

Can you provide an explanation for the "ved" parameter used in a Google search?

I've been spending a good couple of hours trying to unravel the mystery behind the "ved" parameter in Google search results. Curiosity always gets the best of me. Here's what I've discovered so far: The value of "ved" changes- 1 - for ever ...

htmlgoogle-chromesecurityurlgoogle-chrome-devtools

Crop images in a canvas using a customized rectangle with the help of JQuery

I am trying to crop an image inside a Canvas element using a selection rectangle. My project utilizes jQuery and I am in search of a plugin that can help me implement this custom selection rectangle on the canvas itself, not just on images. Are there any ...

javascriptjqueryhtmljquery-pluginshtml5-canvas

The alignment of the labels on the left side of the div is out of place

After spending hours trying to troubleshoot, I still can't seem to align my hidden radio buttons properly within a label with a background image. Instead of lining up on the left side as intended, they are appearing closer to the middle of the div. Fo ...

htmlcss

Enhance the appearance of the initial row in the v-data-table component within vuetify

I have utilized the Vuetify data table component to define the table shown below. My current challenge involves figuring out how to make the first row of the table appear in bold. Specifically, I want the text of the first item record to be bold. Any ass ...

cssvue.jsvuetify.js

Using ChartsJs to visualize input data formatted in the German data format

I am relatively new to working with Charts.js, but I will need it to generate some visually appealing graphs for my website. In the background, I have a Django project running that calculates a specific set of numbers for me. Due to the language setting in ...

javascriptpythonhtmldjangochart.js

Use one tag to abbreviate multiple times

As I create a step-by-step guide, I want the audience to be able to hover over any word in the text and see its definition. However, I only want to define abbreviations once. Is there a method in html or css that allows me to achieve this? ...

htmlcssinstancesabbr

What could be causing the slider to have a choppy transition between images?

The Issue: Looking at this GIF, you can see that the image transitions are not seamless. The slider is built on Bootstrap. I am also trying to ensure that the slider's body does not always adjust to the new image but maintains a minimum size. I have ...

htmlcssbootstrap-5

What is the proper way to credit the glyphicons element in Twitter's bootstrap framework?

According to the section on icons in the Base CSS page of GitHub's Twitter bootstrap, Glyphicons Halflings were not originally available for free. However, thanks to an agreement between Bootstrap and the creators of Glyphicons, developers can now use ...

javascripthtmltwitter-bootstrapglyphicons

Creating a responsive design for an absolutely positioned element

Currently, I am working on an image slider that features two arrow keys. The issue arises when I attempt to adjust the viewport to a smaller size. While the image slider responds by changing its size accordingly, the arrow keys do not follow suit. I am uns ...

csspositionresponsiveabsolute

Retrieve data in JSON format from an external source file

I've been attempting to retrieve JSON content from an external file named list.json, but unfortunately all of my efforts have been unsuccessful. I've created a prototype of my code on Jsfiddle (http://jsfiddle.net/ctmvcyy1/). I believe that the ...

javascriptphpjqueryhtmljson

Send information without refreshing the page

Even though there are countless questions similar to this one, I am still struggling to make this work correctly. Any advice on what steps I should take to fix this would be greatly appreciated, as my understanding of jQuery is about 80%. <form action= ...

phpjqueryhtmlforms

Overflowing Content Spilling from Div, Reaching Beyond Viewport Height

I am struggling with keeping the content inside a div from overflowing, despite using height: 50vh;. This div contains another div that has a background image and an overflow scroll while maintaining a specific aspect ratio. Is it possible to resize the c ...

javascriptjqueryhtmlcssresponsive-design

Arrangement of Headers in HTML5

Take a look at this example of a webpage from my site: <html> <title> artilce header </title> <body> <header> <h1> nme of website</h1></header> <section> <h2> name of section&l ...

htmlseosemantic-markup

What is the most effective method for sharing features while maintaining unique aesthetics?

In the process of developing a Next.js website, I've encountered a challenge: I have 3 forms that function in similar ways but have different styles. Instead of duplicating code for each form, I'm looking for a way to build the form structure on ...

javascriptcssreactjsfrontendstyled-components

Is it impossible to style an element within a div tag?

How can I apply styling to a specific div with id="1", which contains class="match"? Here is the code: <div class="col-lg-3"> <div id="1"> <p class="match">Match {this.state.matches[0].id}</p> <div class="tea ...

htmlcsstwitter-bootstrap

AJAX loading footer content before images are fully loaded

I am a beginner when it comes to ajax and I'm facing an issue where the footer loads before the images, causing the images to overlap the footer. The problem is illustrated in the image below. <!doctype html> <html lang="en"> <head ...

javascripthtmljquerycssajax

"Encountering an Error in Obtaining Geolocation: KCLError

I have been working on a website that utilizes HTML5 Geolocation. Click here to view the code I am using: The HTML: <button onclick="getLocation()">Try It</button> The Javascript: function getLocation() { if (navigator.geolocation) { ...

javascripthtmlgeolocation

Issue with JQuery click() not triggering on a specific div button

I am attempting to replicate a user's click on a website where I have no control over the code. The specific element I am trying to interact with is a div that functions as a button. <div role="button" class="c-T-S a-b a-b-B a-b-Ma oU v2" aria-dis ...

javascriptjqueryhtmlcsssimulation

Unable to activate autofocus feature in search field

I have created a div to house a search field and utilized JavaScript to trigger its appearance from the top when clicking an icon in the navigation bar. I want to set autofocus on the input, but it doesn't seem to be working properly. The code snippet ...

bootstrap-4autofocussearch-form