Adjust the color of the text in the alert information

I am currently using Bootstrap 3 and I would like to change the text color of the alert info and alert danger messages to be darker. How can I achieve this?

I have searched through the Bootstrap documentation, but I was unable to find a way to specifically change the text color.


    .alert-info {
      background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
      background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
      background-repeat: repeat-x;
      border-color: #9acfea;
    }
htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

After examining the Alerts section on Bootstrap's official website and reviewing the unminified CSS file on their Github repository, I couldn't locate any of the CSS properties you mentioned. Instead, I only found the following code snippet:

.alert-info {
    color: #31708F;
    background-color: #D9EDF7;
    border-color: #BCE8F1;
}

If you wish to darken the color, you can utilize a tool like to generate some complementary darker colors:

Answer №2

You have the option to customize using the customizer tool.

For more flexibility, you can download the source code, make changes to the variables.less file, and utilize LESS to convert it into CSS.

An important variable to consider is @alert-info-bg. Explore the files mixins/alerts.less and alerts.less to understand how other colors are generated.

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

What is the best way to position this material-ui select list at the bottom of the input block for proper alignment?

My material-ui select build is working fine overall, but I'm looking to align the top line of the select list with the bottom line of the input block. Any ideas on how to achieve this? This is my code: const styles = theme => ({ formControl: { ...

cssreactjsmaterial-ui

Can the distinction between a page refresh and closure be identified using the method below?

My idea is to trigger a popup window when the page is closed, not when it is refreshed. The plan is as follows: Client Send an ajax request to the server every x seconds. Server var timeout=0 var sec=0 while (sec>timeout) { open popup win ...

javascripthtmldjangoalgorithmpolling

Styling HTML5 Legend with CSS3 within Fieldset

How can I achieve the following effect using CSS3 gradients and borders? Here is the current version of the HTML code: <section style="margin: 10px;"> <fieldset style="border-radius: 5px; padding: 5px; min-height:150px;"> <legend><b ...

htmlcssgradientfieldset

Modify opacity of displayed items in image list with ng-repeat

My application showcases a list of images using ng-repeat. +---------------------------------------------+ | | Previous Image 0 | | | +------------------------------------+ | | +------------------------------------+ | | ...

htmlcssangularjs

Utilizing form elements within a label_tag in Ruby on Rails

I am looking to wrap my text fields and other form elements in a label tag: <label for="response">Tell me what you think: <input type="text" id="response" name="response"/></label> This allows me to apply CSS like the following: label ...

htmlcssruby-on-railsruby-on-rails-3ruby-on-rails-3.2

Selecting parent class using JQuery

This is some HTML I have: <label class="rlabel">First Name</label> <input class="rinput" type="text" placeholder="Fisrt Name" required /> <label class="rlabel">Last Name</label> <input class="rinput" type="tex ...

jquerycss

Click to Rotate the Shape

I am attempting to apply a rotation effect on a shape when clicked using jQuery and CSS. My goal is to select the element with the id of x and toggle the class rotate on and off. The rotate class utilizes the CSS transform property to achieve the desired r ...

javascriptjqueryhtmlcss

Creating an element with a specified class name in javascript: A step-by-step guide

What is the process for creating an element with a specific class name using JavaScript? I attempted to create an element like the following: <div class ="dialog_red_top_page"> <div class ="inner_dialog_red_top_page"> <p class= ...

javascriptjqueryhtmlcss

Ensure that the sidebar in your React application occupies the full height of the page, regardless of the presence of scrolling

In my application, most of the pages fit within the viewport which is why I have been using height: 100vh for my <SideNav /> component. However, some pages now require scrolling and this causes issues with the sidebar as it abruptly ends when scrolli ...

htmlcssreactjsstyled-components

I need either XPATH or CSS to target a specific checkbox within a list of checkboxes wrapped in span tags

I'm trying to find the XPATH or CSS locator for a checkbox in an HTML span tag that has a label with specific text, like "Allow gender mismatch". I can locate the label using XPATH, but I'm not sure how to target the input tag so I can click on t ...

csspython-2.7seleniumxpathselenium-webdriver

Sending a document from a web browser to a label printer and customizing the size of the print area

Seeking advice on how to format content for printing from a browser onto a 2.4"x4" label. When using word processing software like Pages, I can easily adjust the document size and print with confidence that it will fit perfectly on the label. However, ach ...

javascripthtmlcssprintingzebra-printers

Ways to retrieve a webpage component that has multiple values within its class attribute

My dilemma lies in this HTML snippet: https://i.sstatic.net/E7zj0.png Within the code, there are two instances of <div class="sc-fjhmcy dbJOiq flight-information"></div>. I am trying to target these elements using their class attribu ...

htmlxmlselenium-webdriverweb-scrapingconsole

What is the best way to move between different pieces of content using AJAX?

To clarify my current situation, I am using jQuery and AJAX within the main index.php file to load content without refreshing the page. Here is a simplified example of my main index.php page: <!doctype html> <div id="vis"> <?php inclu ...

javascriptphpjqueryhtmlajax

Disabling animations in Bootstrap 3 Carousel is caused by including Stripe javascript

After successfully implementing Stripe for payments in my system, I encountered an issue where the carousel animations stopped working. Instead of sliding smoothly between pictures, it now immediately changes them. The javascript file related to my use of ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3stripe-payments

Issue with Responsive Font Size functionality in Tailwind and ReactJS not functioning as expected

I'm really struggling with this issue. I grasp the concept of mobile-first design and have successfully made my website's layout responsive. However, I'm having trouble getting the font size to change when applying breakpoints as the screen ...

javascriptcssreactjsresponsive-designtailwind-css

Currently, VS2019 is in the process of compiling some commented out code within the ASP.NET framework

Currently, I am in the process of tidying up a website that is quite messy both at the back and front ends. I have chosen not to delete any of the old code, but when I try to comment out the old code using "<!-- -->", the code inside still gets compi ...

htmlasp.net

Downloading MP4 files in Safari instead of streaming them

I'm encountering a strange issue on iOS devices. I have a flowplayer setup with an mp4 file that works fine on desktops. However, when accessed on iPhone and iPad, the video does not play. The same file from plays in the browser, but once uploaded to ...

ioshtmlhtml5-video

Determine the combined width of each child element and divide it by two

I am working on a div that has multiple children inside. To achieve a horizontal layout, I need to set a width on the parent div so that the content flows from left to right. Instead of having all items in one row, I want them to be split into two rows. Th ...

javascriptjquerycsslayoutwidth

How about connecting functions in JavaScript?

I'm looking to create a custom function that will add an item to my localStorage object. For example: alert(localStorage.getItem('names').addItem('Bill').getItem('names')); The initial method is getItem, which retrieves ...

javascripthtmlchaininglocal-storage

using a tag in flex can disrupt the arrangement of the box's design

What could be the reason for this issue? Is it possible to make the hyperlink appear inline with the rest of the text? .test { padding: 25px; display: flex; height: 100%; text-align: center; font-size: 25px; font-weight: 600; ...

cssflexbox