Viewing underlined text in iPhone with Bootstrap 5

Recently, I completed a project using Bootstrap version 5.1.3. Upon checking the mobile version on my iPhone XS, I noticed that all anchor tags (

<a href="#">Something</a>
) have underlined text. To address this issue, I attempted to remove the underlined text using the following CSS code:

a, a:link, a:hover, a:visited, a:focus-visible, a:active {
    color: inherit;
    text-decoration: none;
}

Surprisingly, the underlined text persisted on iPhones but not on Android mobiles. Can anyone assist me in resolving this discrepancy?

Thank you in advance.

htmlcssunderline

Answer №1

text-decoration: none !important;

Implementing !important to ensure effectiveness. Hopefully, this solution proves to be successful!

Many thanks.

Answer №2

a, a:link, a:hover, a:visited, a:focus-visible, a:focus, a:active {
    color: inherit;
    text-decoration: none !important; 
}

Fingers crossed for success!

Answer №3

If anyone else is experiencing a similar issue, I wanted to share my solution.

In the latest version of Bootstrap 5.1.3, there is a convenient built-in class for removing text decoration called text-decoration-none. Implementing this class resolved the problem I was facing.

<a href="#" class="text-decoration-none">Anything</a>

To fix your problem, make sure to use the text-decoration-none class for anchor elements.

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 you call a function in JavaScript based on a condition?

Is there a way to conditionally truncate text using a function called Truncate only when the offsetHeight of the left div with class demo is greater than the offsetHeight of the right div? If this condition is not met, then simply return the original conte ...

javascripthtmlcss

Paged Content: Turning a Lengthy Text into a Book-Like Format

I have a unique idea for displaying text like a flipping book on a web page. Users can use arrow keys to navigate through the content, giving it an interactive and engaging feel. Instead of focusing solely on page transitions, I am looking into implementi ...

phpjqueryhtmlcsspagination

Ways to move an element beyond specified padding using CSS

In this image below, I have added a 10px padding to the container as it is usually needed. However, for the headings (blue) I do not want any padding. Is there a way to make the heading extend over the padding? https://i.sstatic.net/DeSHZ.jpg I prefer no ...

htmlcss

Jekyll is detecting invalid XML entity references

My blog is powered by Jekyll and hosted on GitHub Pages. I've noticed that Jekyll sometimes incorrectly XML escapes a special character as &tt;. For example, in the RSS feed located at this link, the source XML: </p> <p> is transfo ...

htmlrubyxmljekylljekyll-bootstrap

Tips for placing a background color *behind* a bootstrap button

When a button is clicked, I want to display an input with a background surrounding both the button and the input. Currently, my markup renders like this: https://i.sstatic.net/rxaPt.png So when the button is clicked, I need a yellow (alert-warning) backg ...

htmlcssbootstrap-4

Having trouble locating and interacting with the textarea element in Salesforce using Selenium Webdriver

Encountering an issue with the Selenium Webdriver where it throws an error stating that the element is not visible and cannot be interacted with when attempting to access a textarea. 1. The textarea is located within a pop-up window, which can be accessed ...

javascripthtmlseleniumselenium-webdriver

Interactive button visual effect

I have a piece of code that currently plays audio when I click on an image. However, I am looking to modify it so that not only does clicking on the image play the audio, but it also changes the image to another one. Can anyone assist me with this? Here i ...

javascripthtmlimageaudio-player

Overlapping input elements occur when Twitter bootstrap prepended input elements are positioned side by side

I ran into an issue while attempting to place two input elements side by side, with a prefixed item on the first input, using display:table styles. Unfortunately, the second input element ends up overlapping the first. I tried using box-sizing: border-box ...

htmlcsstwitter-bootstraptextinput

different ways to dynamically increase CSS ID in PHP

Is there a way to dynamically increment my CSS ID using PHP? foreach ($query_cat->result() as $row_cat) { $row_cat_id = $row_cat->id; echo '<div class="product-wrapper">'; echo '<div id="product-header' . $r ...

phpcss

Using addClass and removeClass functions in JQuery when selecting a radio button

I am facing an issue with my radio buttons being displayed as images. When a picture (radio button) is selected, I want the other pictures to become hidden. To achieve this, I plan to add a class to the checked picture and then add another class to the unc ...

javascriptjqueryhtmlradio-buttonchecked

What is the best way to halt a JavaScript function originating from embedded iframe content?

When I embed another website using iframe, there is a javascript function on their page that I do not want to run on my own page. Here it is: if (top.location != location) { top.location.href = document.location.href; } I attempted a solution but it ende ...

javascriptjqueryhtmliframe

Necessary Selection from Dropdown

I've created a contact form with both optional and required fields. One of the mandatory fields is a drop-down menu, which looks like this: <div> <select name="favFruit[]" size="1" required> <option value="apple">Apple&l ...

jqueryhtmljquery-validateselectlist

Issue with the close button on ngb-alert not functioning properly

As I develop my website, I have incorporated an ngb-alert component to display an alert message to users upon login. While the alert itself is functioning properly, I have encountered an issue with the close button being misaligned, and I am struggling to ...

javascriptcssangulartypescriptng-bootstrap

Having difficulty setting a value for a tooltip with replaceWith() function

When using jQuery's .replaceWith() method to insert new DOM contents, I noticed that all content gets replaced except for the value of the title. Even though I tried different approaches, the tooltip only displays {{descriptions.title}} instead of the ...

javascriptjqueryhtmlangularjs

Button with CSS Sprite

These Sprite buttons are making me lose my mind. I'm so close to getting them to work, but not quite there yet. I've been playing around with this really simple sprite image: If you want to see the jsfiddle project, it's available here, bu ...

htmlcsscss-sprites

Sending information from one page to another and then sending it once more

I am currently utilizing the following code to submit a form's data to : <script type="text/javascript"> $(document).ready(function(){ $("#textnextofkin").validate({ debug: false, rules: { ...

phpjavascripthtmlajaxforms

Is there a way to create a fixed container aligned to the right and have the parent container handle scrolling?

My setup is as follows: Full width, 100px height header The header is always visible at the top. Full width, remaining height details The content of details can scroll vertically and horizontally. A fixed 200px width, full height container is right- ...

htmlcss

Identifying added elements that respond to link hover effects

I've been working on a project where I'm trying to replace the default browser cursor with an SVG one using jQuery. Everything seems to be working smoothly, except for changing the cursor when it hovers over links - nothing I've tried so far ...

javascriptjquerycsssvg

Steps for moving data from a JavaScript variable to a Python file within a Django project

I have created a unique recipe generator website that displays each ingredient as an image within a div. When the div is clicked, it changes color. My goal is to compile the ids of all selected divs into one array when the submit button is clicked. I have ...

javascriptpythonhtmljquerydjango

The compilation process in my gulpfile is not successful

I have spent the past few days trying to figure out how to solve my problem but haven't had any luck. My gulpfile is not compiling my css even though it should be. Originally, my gulpfile was set up for sass files and everything worked perfectly. Howe ...

csssassgulp