What is the best way to include a subscript (small letter) beneath a word using html and css bootstrap 5?

Is it possible to add a small letter (sub) below a word in HTML and CSS? I have included a screenshot for reference. I want to display "Max 100, Min 1" just like shown in the image. Here is my code:

<input type="text" class="textarea" alt="" value="" style="color: #1c91df; height: 50px; width: 100%; margin-top: 0px; margin-bottom: 0px; border-color: #1c91df; box-shadow: none; border-width: 1px;">

<input type="number" class="textarea" alt="height" value="10" style="color:#30a2ee;"/> Height <sub>Max 100</sub> <sub>Min 1</sub>
<input type="number" class="textarea1" alt="depth" value="10" style="color:#30a2ee;"/> Depth <sub>Max 100</sub> <sub>Min 1</sub>

https://i.sstatic.net/LS96T.png

htmlcssbootstrap-5

Answer №1

Is this the answer you were hoping for? Here is a screenshot attached. https://i.sstatic.net/HFq7H.png

Below is the code snippet provided:

<div class="dimentions">
  <input type="number" class="textarea" alt="height" value="10" style="color:#30a2ee;"/>
  <p class="big_text">Height</p>
  
  <input type="number" class="textarea" alt="depth" value="100" style="color:#30a2ee;"/>
  <p class="big_text">Depth</p>
</div>

<style>
  .dimentions {
    display: flex;
    flex-direction: row;
    align-content: center;
    min-height: 50px;
  }
  .dimentions .textarea {
    margin-right: 10px;
    padding: 10px;
    width: 100px;
    border: 1px solid #30a2ee;
  }
  .dimentions .big_text {
    position: relative;
    padding-right: 30px;
    color: #30a2ee;
  }
  p.big_text:before {
    content: "Max. 100";
    position: absolute;
    left: 0;
    top: 25px;
    opacity: 0.5;
  }
  p.big_text:after {
    content: "Min. 1";
    position: absolute;
    left: 0;
    top: 40px;
    opacity: 0.5;
  }
</style>

Answer №2

sub {
    text-transform: lowercase; 
}

Here are 5 unique options for text transformation:

**lowercase**: converts all letters in the selected text to lowercase
**uppercase**: transforms all letters in the selected text to uppercase or ALL CAPS
**capitalize**: capitalizes the first letter of each word in the selected text
none: keeps the text's case and capitalization unchanged
**inherit**: applies the text's case and capitalization from its parent element
**full-width**: a special keyword that forces characters to be written inside a square shape.

Answer №3

There are countless ways to achieve this. One approach is using flexbox:

<div class="mygroup">
  <input type="number" class="textarea" alt="height" value="10" style="color:#30a2ee;"/>
  <div class="mystyle">
    <span>Height</span>
    <sub>Max 100</sub> 
    <sub>Min 1</sub>
  </div>
  
  <input type="number" class="textarea1" alt="width" value="10" style="color:#30a2ee;"/>
  <div class="mystyle">
    <span>Width</span>
    <sub>Max 100</sub>
    <sub>Min 1</sub>
  </div>
</div>

Accompanied by the following CSS:

.mygroup {
  display: flex;
}
.mystyle {
  display: flex;
  flex-direction: column;
}

Answer №4

The following custom CSS code should be inserted into your stylesheet for the desired effect.

sub {
    text-transform: lowercase;
}

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

Double Row Navbar Struggles in Bootstrap 4

I have been experimenting with creating two bootstrap navbars. The first one features the website's domain name in the center, accompanied by a dropdown menu to navigate to other sections. Each of these sections has its own subbar containing specific ...

htmlcssbootstrap-4navbar

The background of the webpage section is being cropped on mobile devices

Currently, I am delving into the creation of a website completely from scratch to serve as an online CV for networking and job/school applications. My journey with HTML and CSS is relatively fresh, having started only about 5 months ago. Overall, things ha ...

htmlcssmobile

Ensuring the selected date matches any consecutive dates within the dates array in Angular

Imagine if 01/01/2022 is chosen from the input field, and my array of dates looks something like this: ['31/12/2021', '01/11/2021', '02/01/2022'...] In this scenario, when '31/12/2021' and '02/01/2022' are ...

htmlangulartypescriptvalidation

What could be causing my PrimeReact dropdown component to ignore the custom class styles?

Within my Project, I am utilizing multiple Prime React dropdown components and I am aiming to customize one of them with a unique style. In my CSS, I have established global styles to overwrite the default settings for all the dropdowns. However, when tryi ...

javascripthtmlcssreactjsprimereact

The Ng-include tag does not provide highlighting for its text

Within an ng-include template, I have a div that is not highlighting when hovered over. Although the cursor changes to a pointer when hovering over the text, attempting to click and drag to highlight it results in nothing happening. This issue is signific ...

htmlcssangularjsangularjs-ng-include

How to Vertically Center a Span in a Mat-Header-Cell with Angular 5 Material

In my angular5 application, I am utilizing a material table to showcase some data. Within a mat-header-cell, I have a combination of a span and an img, and I'm attempting to align them correctly. This is how it currently appears: https://i.sstatic. ...

htmlcssangularangular5

Learn how to use Bootstrap to style your buttons with centered alignment and add a margin in between each one

Looking to center four buttons with equal spacing between them? Here's what you can do: |--button--button--button--button--| Struggling with manual margin adjustment causing buttons to overlap? Check out this code snippet: <div id=""> ...

htmlcssbootstrap-5

When I open my website in the browser, the bootstrap card-deck design is not being displayed correctly

I encountered a strange issue while designing my website. The code I wrote for the Bootstrap card-deck class in codeply.com was working perfectly fine. However, when I copied the same code into my PyCharm code editor and then pasted the file link into my b ...

pythonhtmlcssbootstrap-4web-development-server

Can you explain the purpose of the search_/> tag used in this HTML code?

I came across this code snippet while working on creating a customized new tab page for Firefox. <input class="searchBar search_google" type="text" name="q" placeholder="Google" search_/> However, I'm confused about the search_ ...

htmlformssearchwebinput

Issues with merging styles in TinyMCE 4

I've exhausted all the current configuration options and I'm still unable to resolve this issue. My goal is to have the style tag appended to the selected element without generating an additional span. For example: <p>Hello World!</p> ...

javascripthtmltinymcetinymce-4

What is the process for connecting a personalized bootstrap framework with an index.html document?

I have recently dived into the world of bootstrap and I just customized my bootstrap file on http://getbootstrap.com/docs/3.3/customize/ After compiling and downloading, I found it challenging to link it with my index.html file. The source of the bootstra ...

htmlcsstwitter-bootstrap-3customization

Positioning of bottom navigation bars

Is there a way to ensure that the bottom navigation bar remains fixed at the bottom of the screen, regardless of the device's screen size? position: absolute; bottom: 0; width: 100%; While this solution works, it has been observed that when th ...

cssmaterial-designmaterial-uiprogressive-web-apps

Managing the ajax response to showcase a button within datatables

Here is my current datatable structure: <table id="list" class="display" width="100%" > <thead> <tr> <th>Title</th> <th>Description</th> <th>delete</th> ...

javascripthtmlajaxdatatable

Tips for indicating which content to display on template literals

Utilizing template literals to showcase some fetched data, I've successfully displayed all the necessary information on the frontend. However, certain content is hidden and meant to be toggleable. Yet, I'm struggling to figure out how to link eac ...

javascripthtmlcsstemplate-literals

When an anchor link is dynamically created, the `click()` method does not activate the click event

After creating an anchor element using the document.createElement('a') method, I encountered an issue where the click event was not being triggered as expected. To provide more context, refer to the code snippet below: var link = document.create ...

javascriptjqueryhtml

Dim the brightness of an image on Internet Explorer

I discovered this code on another site and it functions flawlessly in Chrome and FF, however, IE (version 11.0.9) doesn't seem to like it. -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); fil ...

javascripthtmlcss

Angular pop-up message not displaying title or content

I have integrated the toaster directive into my AngularJS web project. Following the documentation, I have declared the container on my view as shown below. <toaster-container toaster-options="{'time-out': 3000, 'close-button':true ...

javascripthtmlangularjstoast

Spacing between the rows of a table

I am seeking to achieve a unique visual style for the rows in my table, similar to the one shown below. I attempted to use CSS border properties in the code snippet provided but desire more spacing between each row with a thin border and sharp edges. .dat ...

cssangularbootstrap-4ngx-datatableborder-spacing

Adjust the z-Index of the list item element

I am attempting to create an effect where, upon clicking an icon, its background (width and height) expands to 100% of the page. However, I am struggling with ensuring that the 'effect' goes underneath the this.element and above everything else. ...

javascriptjqueryhtmlcss

Switching JSON data when clicked in Angular 2

Looking for a way to dynamically switch between different data sets in JSON upon user interaction with UI buttons. I am utilizing Angular 2 framework for this task. The HTML structure is as follows: <button type="button" (click)="changeOdds('odds ...

htmlangular