Modify the color of the active button within the Bootstrap Links and Buttons element

Greetings! I am currently utilizing Bootstrap's Links and buttons

My objective is to modify the color of the active button highlighting, which is set to white by default, to a different color:

<div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-12">
        <div class="list-group">
          <h2><a href="#" class="list-group-item active">
          <strong>T E X T</strong></a>
           <a href="page1.html" class="list-group-item list-group-item-action"> Link 1 </a>              
            <a href="page2.html" class="list-group-item list-group-item-action"> Link 2 </a>                    
        </div>
      </div>
    </div>
</div>

I attempted to achieve this following the guidance provided in this response to a similar inquiry using CSS, since I don't have scss/bootstrap.scss in my module, only _bootstrap-overrides.scss

Added to the end of bootstrap.css:

 a {color: #8cf1dd;}
 a:hover {color: #e9d214;}

and within the <head> section of the HTML encompassing Bootstrap Links and buttons component:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.card .nav-link {color: #8cf1dd;}
.card .nav-link:hover {color: #e9d214;}    
</style>

Despite implementing these changes, the color remains unchanged and I desire a result similar to this

htmlcsstwitter-bootstrap

Answer №1

Here is a solution for you to try: https://jsfiddle.net/a29696xg/7/

.list-group-item-action:hover {background: #95f507;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-12">
        <div class="list-group">
          <h2><a href="#" class="list-group-item active">
          <strong>T E X T</strong></a></h2>
           <a href="page1.html" class="list-group-item list-group-item-action"> Link 1 </a>              
            <a href="page2.html" class="list-group-item list-group-item-action"> Link 2 </a>                    
        </div>
      </div>
    </div>
</div>

When styling in CSS, it's important to target specific elements, like using a class such as .list-group-item-action instead of targeting all anchor tags.

Although the code may not run on stackoverflow, it should work correctly on jsfiddle.

I hope this solution helps you with your styling needs.

Answer №2

example link

.customize-color .list-item:not(.selected):hover {
  background-color: #00ff73 ;
  }
<link href="https://examplecdn.com/example.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-12">
        <div class="list-group customize-color">
         <a href="#" class="list-item selected">
          <strong>T E X T</strong></a>
           <a href="page1.html" class="list-item list-item-action"> Link 1 </a>              
            <a href="page2.html" class="list-item list-item-action"> Link 2 </a>                    
        </div>
      </div>
    </div>
</div>

In your query, the initial request did not specify changing the background color, only the color. This revised response addresses that.

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

I'm having an issue with my link hover effect - it seems to be causing my link to disappear, despite the fact that the hover effect

Greetings and many thanks in advance for lending your assistance and patience. I am fairly new to the world of CSS and have yet to navigate the realm of transitions. Present before you is a modest div encompassing a background image with a text-block over ...

htmlcss

How can you implement code that responds differently based on whether the user clicks the OK, cancel, or close button in a confirm dialog

What are three buttons in a confirm dialog box? How can JavaScript be used to perform different actions when the "ok" and "cancel" buttons are clicked, without performing any action when the dialog box is closed? ...

javascripthtmlconfirm

Ways to conceal a div using ng-hide

Is there a way to make a div disappear using ng-hide? I have this code and I'm trying to hide the div with id="ApagarNA". The code displays a table with values, but some rows contain N.A in all 4 columns, and I want to hide those specific rows. For e ...

htmlangularjs

AngularJS: Utilizing UI Bootstrap Popover with the Placement Set to 'bottom-right'

I am working with UI Bootstrap and AngularJS, attempting to customize a popover to have the 'bottom-right' placement instead of the default 'bottom' or 'right'. The desired functionality is illustrated in the image below. htt ...

javascriptcssangularjstwitter-bootstrapangular-ui-bootstrap

Facing a minor HTML syntax error while attempting to configure metatags in Ruby on Rails

I'm attempting to incorporate social tags into my site, such as Tweet count, Facebook recommendations, and their respective numbers. In the app/views/application/_ogmeta.html.erb file, I have only included one line: <meta property="og:title" cont ...

htmlruby-on-railssyntax-error

Utilizing Bootstrap 5 for Angular Projects

With the release of version 5, the Bootstrap framework has eliminated the need for jQuery. I am curious about how this change impacts Angular applications. Can we still utilize all of Bootstrap's features in Angular, such as dropdowns? In the past, ...

javascriptjqueryangulartwitter-bootstrapbootstrap-5

Tips for choosing an <li> element with JavaScript

<style> .sys_spec_text{} .sys_spec_text li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;} .sys_spec_text li a{ color: #db0401; height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; dis ...

javascriptjqueryhtmlcss

Achieving success by correctly reaching the window's edge during an event (onscroll)

This happens to be my 1st inquiry. Specifically, I have a navigation menu with a transparent background and I am attempting to alter the background once it reaches the top edge of the window. window.addEventListener("scroll", navSticky); function navSt ...

javascripthtmlcssonscroll

Eliminate the standard blue border that appears when control-clicking on table elements

I've encountered this question before, but unfortunately none of the solutions provided have worked for me. Some things I've attempted are: Using event.preventDefault() - did not produce the desired result. Removing user-select from CS ...

javascripthtmlcss

Fetching data using HTML script is not possible

Struggling to retrieve data from mongoDB and send it to the client side using res, but I keep getting undefined. Can anyone offer some assistance? Thank you all! //// server.js app.get('/user/show', userController.userList); //// controller cons ...

htmlnode.jsexpresshttphttprequest

What sets apart adding a row from adding a col-12 in Bootstrap 4?

I have a doubt that I'm trying to clarify, but unfortunately it's not mentioned in the Bootstrap 4 documentation. Can someone explain the difference between these two code snippets? <div class="container"> <div class="row"> < ...

htmlresponsive-designbootstrap-4

Check if text is being added to an input field using jQuery and then execute a specified function

My input field has the readonly attribute set by HTML, and I am populating text into it using jQuery's .html() method: <input type="text" id="myField" readonly="readonly" /> I have a function called myFunction() th ...

htmljqueryjquery-events

Hover over this area to reveal the hidden text as it slides into view

My goal is to hover over truncated text and reveal the full length of the dynamic text. However, I am struggling with removing extra space at the end of shorter text when hovered and displaying all the text for longer ones. I have a solution that almost w ...

htmlcsshover

Tips for choosing specific CSS selectors from a variety of different stylesheets

Currently, I am using two different stylesheets - Bootstrap 4.0 and Materialize 4.0. My challenge is selecting specific selectors from both stylesheets but overriding conflicting styles. For instance, I would like to apply the header navigation style fro ...

htmlcssbootstrap-4materialize

`The LiipImagineBundle HTML encoding error`

Utilizing LiipImagineBundle, I efficiently resize my images after uploading. However, I encountered an error specifically when trying to upload certain JPEG files due to HTML encoding issues. The resizing process works fine with JPEG files from my camera, ...

phphtmlsymfonyencodingliipimaginebundle

Modifying inner content without altering CSS styling

Inside this div, there is a paragraph: This is the HTML code: <div id="header"><p>Header</p></div> This is the CSS code: #header p { color: darkgray; font-size: 15px; Whenever a button is clicked, the innerHTML gets updated: H ...

javascripthtmlcssinnerhtml

Creating horizontal cards with Angular MaterialWould you like to learn how to design

I need help converting these vertical cards into horizontal cards. Currently, I am utilizing the Angular Material Cards component. While I can successfully create cards in a vertical layout, my goal is to arrange them horizontally. Below is the code sni ...

htmlcssangularangular-material

Building a loading spinner component in a react-native project

I have successfully implemented a loading spinner that is currently being used in various components of my React project. However, as I am now working on a react-native version of the application, I am faced with the challenge of recreating this loading sp ...

javascriptcssreactjsnode.jsreact-native

Adjusting Bootstrap 4 Modal Transparency

Currently using Bootstrap 4 Beta and looking to darken the background when a Modal is displayed. I stumbled upon a solution suggesting the addition of a CSS class. .modal-backdrop.in { opacity: 0.5 !important; position: fixed; } The advice was no ...

htmlcssbootstrap-modalbootstrap-4

Searching within a container using jQuery's `find` method can sometimes cause jQuery to lose control

I am trying to extract information from an input field within a table in a specific row. Here is the code I am using: var myElements = $('#myTable tbody').find('tr'); console.log(myElements); This correctly displays the items in the ...

javascriptjqueryhtml