After the scaffold generator, the Twitter-bootstrap buttons now feature text in a subtle gray

I seem to be facing a similar issue to what was discussed in this thread about Twitter Bootstrap displaying buttons with greyed text. The problem I am encountering is with a btn-info button that has a dropdown - after clicking on an item in the dropdown, the text of the button turns grey and only changes back to white when hovered over. This strange behavior persists even after stopping and restarting the rails server, and switching browsers also does not solve the problem.

I suspect this problem arose after running a scaffold generator, although unlike the solution suggested in the previous thread, I do not have a Scaffold.css file to delete. Any suggestions on how to fix this persistent grey color of the button's text?

Below is the HTML code for my button:

<span class="span3 btn-group">
    <a id="j_button" class="btn btn-info session_button dropdown-toggle" data-toggle="dropdown" href="#">
        Send to J location
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a id='j_dropdown1' href="#">New issue</a></li>
        <li><a id='j_dropdown2' href="#">Add to existing</a></li>
    </ul>
</span>

The only CSS I added for the button is:

.session_button {
  font-size: 12px;
  font-weight: bold;
  padding-left: 8px;
  padding-right: 5px;
  padding-bottom: 0;
  padding-top: 0;
}

Answer №1

The reason for the button appearing as a link is because it is actually a link.

It may seem like a button due to the added classes btn and btn-info, which utilize Twitter Bootstrap styles. When a link is clicked, the browser typically remembers that you have visited it before and displays the visited state accordingly.

If you wish to customize the visited state of the link to appear differently from the default gray color, you can apply CSS styles.

To ensure the link remains white when visited, include the following code:

.session_button:visited { color:#FFF; }

For more information on styling visited links, refer to CSS selector for visited links.

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

Shake up your background with a random twist

Seeking assistance with customizing the Aerial template from HTML5UP. I am interested in selecting a scrolling background randomly from a pool of images. Can someone guide me on how to achieve this? Presently, the background is defined within a code block ...

I seem to be having an issue with the decimal point on my calculator - I only want to see one dot

Only need one dot for the calculator to function properly. The current situation with multiple dots is causing confusion. I intend to address other aspects of the code later, but I'm currently struggling with this issue. function dec(d) { let ...

Altering the flex-direction causes my divs to vanish into thin air

Just starting out with css, trying to get some practice. I'm attempting to position two divs on opposite sides of a parent div. Switching flex-direction from 'column' to 'row' causes the divs to disappear. #assignments-wrapp ...

Does the 'span' element negatively impact the vertical alignment of text?

While working on my code, I noticed an issue with vertical alignment when using span tags to change the background of the text based on its content. The problem occurs specifically when viewing the code in the Android Chrome browser. You can view the initi ...

Tips for creating a stylish navbar with a faded effect on the right side and integrating a fresh button into its design

I'm looking to enhance my Navbar by implementing a feature where, if the width of the Navbar exceeds that of its parent div, it will fade on the right side and a new button will be added - similar to what can be seen on Youtube. 1- When the Navbar&ap ...

How can I bring the toolbar to the forefront of the page in an Angular/HTML environment?

I am currently facing an issue with bringing the toolbar to the forefront of the page. When I scroll down, the elements on the page end up covering the toolbar which is not the desired behavior. Below is the CSS code for the toolbar: .maintoolbar.mat-tool ...

Attempting to display divs at the bottom when hovering over menu options

I need help troubleshooting my HTML and CSS code. I want to be able to hover over a menu item and have the corresponding div appear at the bottom. Can you point out what's wrong with my code? <!DOCTYPE html> <html> <head> &l ...

Glitch in Safari 6: Round Corners Issue

Greetings! Upon observing the image provided, an unusual behavior can be noticed in Safari 6 concerning round corners. { border-radius: 5px 5px 5px 5px; } Upon hovering over the elements, a thin line appears that seems to accumulate with each subsequent ...

Arranging Boxes side by side

I am struggling to align three boxes horizontally on my website, as they are currently stacking vertically. I have implemented Twitter Boostrap's 'row' class in an attempt to achieve this layout. HTML: .img-box-kai { width: 300px ...

Tips for making a div overlap with Twitter Bootstrap positioning

Currently, I am attempting to utilize Bootstrap 4.5 to position a div over two existing divs. Instead of explaining it through text, the image linked below provides a visual representation of what I am aiming for: https://i.sstatic.net/gbylW.png In this ...

Creating a basic popup with jQuery: A step-by-step guide

Currently in the process of creating a webpage. Wondering how to create a popup window with an email label and text box when clicking on the mail div? ...

Spacious width that doesn't require a horizontal scrollbar for navigation

My dilemma is with the width of my body and background image. I set the body width to 1920px to match the background-image for the header. However, since I have a narrower wrapper inside the body, the header background's width gets cut off by the wrap ...

What is the method for applying background color to text within a textbox?

I am struggling to phrase this question properly and unable to find the solutions I need on Google. When searching, it only provides information on how to add an entire background color to a textbox, which is not what I am looking for. What I aim to achiev ...

The paragraph tag remains unchanged

I am currently working on developing a feature that saves high scores using local storage. The project I'm working on is a quiz application which displays the top 5 scores at the end, regardless of whether the quiz was completed or not. However, I&apo ...

What is the best way to incorporate a linear gradient into the background image using bootstrap?

I'm working on a react app and I'd like to apply a linear gradient of 0.7 to the background image using bootstrap. Can anyone help me with this? <Carousel.Item> <img className='banner-bg d-block w-100 bg-dark bg-gradient &apo ...

Code behind implementing a new System.Drawing.Font

Recently, I have been attempting to generate an image using the Black Rose font in c# but unfortunately, the output does not reflect the desired font. Below is the code snippet I used for creating the image: protected void Page_Load(object sender, Eve ...

What does the Bootstrap 5 class "me-auto" signify?

This code snippet is for the navbar ul part in Bootstrap 5, but I'm facing some issues: I am having trouble changing the position of the ul from left to right. Can someone explain the purpose of the Bootstrap 5 class "me-auto" ...

Interested in customizing the hover color of the header links in WordPress?

I'm currently working on customizing the hover color of the links in my WordPress header created with Elementor Page Builder. I tried several CSS solutions by inspecting elements and adding them to the custom CSS section in WordPress, but none seemed ...

Ensuring proper alignment of images and text in HTML when resizing

Trying to show an image and text side by side, I'm using the following code: div.out { background-color: silver; border: 1px solid black; padding: 10px; display: flex; } div.right { order: 1; background-color: white; border: 1px soli ...

Preventing Height Stretch in CSS Flex-Wrap: A Guide

Is there a way to eliminate the large gaps between box3, box1 and box4, box6? How can we ensure each box adjusts its height dynamically? .wrap { display: flex; align-items: baseline; align-content:flex-start; justify-content: space-between; fl ...