What is the best approach in Bootstrap for displaying light text on a light background?

How should light text be handled on potentially light backgrounds (such as over images, where the image content is unknown but could be white or very light)?

You can see an example of some effects here.

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

It's important to note that even on a pure white background, the words should still be somewhat readable.

I attempted to replicate this using bootstrap 4 with the following code:

<span class="text-light shadow-lg">
My text
<span>

Unfortunately, this method did not seem to work - I couldn't achieve the desired effect.

Since this is a common issue, I'm hopeful that bootstrap has a built-in solution for handling it effectively?

Answer №1

bootstrap does not include text-shadow styling by default. You can achieve a similar effect by using the text-light class and customizing your shadow with CSS.

/* just for demo */
body {
  padding: 10px;
}

span {
 text-shadow: #000 1px 1px 5px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47252828333433352637077269776976">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<span class="text-light">text</span>

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

Ensure that two cells within the same row of two tables are equal in width

I have 2 tables in the same row of a large table, set up like this: <table> <tr> <td>Type</td> <td>Storage 1</td> <td>Storage 2</td> </tr> ...

What is the best way to dynamically create list items for an unordered list using ASP.NET?

In my development project, I am facing an issue where an error panel needs to be displayed on a page in case of errors. Currently, the error messages are being appended to a string and then added to a label. However, dealing with multiple errors makes this ...

What is the best way to reveal a hidden div using JavaScript after a form submission?

jQuery is not a language I am very familiar with, but I am attempting to display a simple animated gif when a form is submitted. When users click 'submit' to upload an image, I want the gif to show to indicate that the image is being uploaded. Th ...

"Create a smooth transition effect in CSS by fading out one div and fading in

I've set up a grid of buttons, and my goal is to have the grid fade out when a button is clicked, then fade in with a new div in its place. This involves animating opacity from 1 to 0 and vice versa while toggling the display:none property for content ...

Tips for toggling the visibility of a <div> element using PHP code inside

I'm having trouble with a dropdown list that is supposed to show/hide some divs containing PHP files. However, when I try to toggle the visibility of the divs using the dropdown list, it doesn't seem to work as expected. Can anyone help me figure ...

Show content to the right side of the division element

I would like to display the bold text up here, and this is my code: img{ margin-left:10px; } html <div id="wrap"> <img src="bg.jpg" /> <b class="name">WaqasTahir</b> </div> ...

Contrasting JavaScript form submission with a form that includes a submit button

Could someone clarify the theoretical difference between using JavaScript to submit a form and having a form with a submit button? (I'm currently utilizing the Struts framework, but I believe that shouldn't impact the functionality.) For exampl ...

What is the best method for fetching data from PHP to display on my Angular page?

I am struggling to retrieve data from MySQL to display on my AngularJS page, using PHP as my server-side language. I can fetch the data from my PHP file but unable to render it on my page. If you have any alternative solutions, please let me know. Below i ...

Implement a color overlay effect by adjusting the z-index property when a checkbox is selected

There is a checkbox that will select a table containing product information. When this item is selected, a CSS style overlays the table with a 30% color tint to indicate it has been chosen. By using only CSS and jQuery, I can apply a style with a higher z ...

What is the best way to include an attribute to an object in a knockout observable array and ensure a notification is triggered?

Implementing Knockout.js in my project, I have an observable array included in the view model. function MyViewModel() { var self = this; this.getMoreInfo = function(thing){ var updatedThing = jQuery.extend(true, {}, thing); ...

Arrange three images both vertically and horizontally at the center of the page

I am facing an issue with aligning a button and 2 images in a row on my website. Currently, this is how it looks: https://i.stack.imgur.com/yrQB6.png Here is the HTML code I am using: <div class="row text-center"> <div class="col-md-12"> ...

What is the best way to restrict the height of an image to match the height of another flexbox column

I am working with a flexbox layout that has two columns. The first column contains an image, and the aspect ratio of the image is unknown at design time. My goal is to display the full image while preserving its aspect ratio. The second column consists of ...

Find a solution to splitting the area in half, with one side designated for the icon and the other for text

https://i.sstatic.net/Ov3yF.png I'm currently working on a code to assign tasks to employees, and I have created a login form with multiple text fields, each accompanied by an icon. However, there seems to be a layout issue as shown in the image. The ...

Customize the appearance of a React component depending on its unique identifier

After creating a simple TODO app with drag and drop functionality, I am now looking to apply a line-through CSS style to any task added or dragged into the second column of my app. What is the best way to target these tasks using their unique ID: <div c ...

Omit the checkbox for children when clicking

I am encountering a problem with the following HTML code: <tr class="clickable" onclick="location.href='https://www.w3schools.com'"> <td> Lore ipsum </td> <td>More content</td> <td>< ...

Navigating to the end of a list using Angular's scroll feature

I'm trying to figure out how to automatically scroll to the bottom of a list in TypeScript, can someone help me with this? Here's a similar example I found that uses jQuery (I specifically need it in TypeScript): Scroll to bottom of list wit ...

Splitting a webpage using css

Is it possible to split a page into two sections using different CSS stylesheets without resorting to framesets? ...

The $.getJSON function seems to be malfunctioning and is not returning the expected data, instead, showing [object Object

I seem to be encountering a common issue with my ajax call not retrieving the JSON data. It appears that it may be due to an array and not using the correct index, although I am indeed utilizing an index on the front-end. Despite trying various solutions f ...

Displaying a dynamic splash screen during the resource-loading process on an Android application

I would like to implement an animated image (currently using a set of PNGs) as a splash screen while my resources are loading. I have successfully displayed the splash screen using this method. However, the issue I am facing is that the splash screen appe ...

Utilizing Nginx with Angular2 for a seamless PathLocationStrategy implementation in html5

Angular2 is a single-page site, so all URL requests need to be redirected to index.html using Nginx. Below is the Nginx server block configuration: server { listen 8901; server_name my_server_ip; root /projects/my_site/dist; location /.+& ...