Is there a way to customize the background color of the active list item class in Bootstrap 4?

Customizing Boostrap Code :

<!-- Custom Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"><strong><?= __('Admin Panel') ?></strong></div>
<div class="list-group list-group-flush">
<a href="#" id = "dashboard-tab-btn" class="tablinks list-group-item list-group-item-action active"><?= __('Dashboard') ?></a>
<a href="#" id = "users-tab-btn" class="tablinks  list-group-item list-group-item-action"><?= __('Users') ?></a>
<a href="#" id = "instructors-tab-btn" class="tablinks  list-group-item list-group-item-action"><?= __('Instructors') ?></a>
<a href="#" id = "courses-tab-btn" class="tablinks list-group-item list-group-item-action"><?= __('Courses') ?></a>
<a href="#" id = "enrolled-tab-btn" class="tablinks list-group-item list-group-item-action"><?= __('Enrolled Students') ?></a>
<a href="#" id = "instruct-courses-tab-btn" class="tablinks list-group-item list-group-item-action"><?= __('Instructor Courses') ?></a>
<a href="#" id="transactions-tab-btn" class="tablinks list-group-item list-group-item-action"><?= __('Transactions') ?></a>
</div>
</div>

To customize the background-color of active list items, add the following code snippet to your CSS: 

.active{
    background-color: #00cccc;
}
css

Answer №1

To enhance the appearance, consider using !important following the font size.

.highlighted{
    font-size: 18px !important;
}

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

Lightbox Thumbnail feature in Wordpress theme

Looking for some help with customizing code in my WordPress theme. The current setup includes a thumbnail image with two icons on top - one is a lightbox gallery icon that I want to focus on, and the other is a like button. My goal is to remove the lightb ...

phphtmlcsswordpresslightbox

Gradually bringing a tag into view, gently fading it away, and then altering the text before beginning the cycle anew

I have a situation where an tag's content is being dynamically changed with jQuery and then faded in and out using the Velocity JS library along with the setInterval function. Initially, everything works smoothly for about 30 seconds. However, after ...

javascriptjqueryhtmlcss

Step-by-step guide on utilizing jQuery to fade out all elements except the one that is selected

There are multiple li elements created in this way: echo '<ul>'; foreach ($test as $value){ echo '<li class="li_class">.$value['name'].</li>'; } echo '</ul>'; This code will generate the fol ...

jquerycssfade

Are conditional comments truly the best approach? What is their functionality and operation like?

A previous question addressing a div positioning issue in Internet Explorer received multiple suggestions advising the use of conditional commenting Why is this relatively positioned div displaying differently in IE? How does one implement conditional co ...

htmlcsslayout

The unequal division of space between two flexed child divs is caused by varying image sizes

In my parent container, I have set the display property to flex. Inside, there are two divs with both having flex:1 set. However, the first child div contains an image and takes up twice as much space as the second div. If the screen is 1000px in height, ...

htmlcss

How to create nested nav menus that are optimized for touch-screen devices?

When it comes to creating responsive websites, one challenge I frequently encounter is designing a multi-level nav menu that functions effectively for touch devices. Many plugins and methods exist, but most fall short because they do not allow a second-l ...

htmlcssresponsive-designnavigation

What is the best way to create a fully clickable navbar item for the Bootstrap dropdown feature?

I'm struggling to make a button in a navbar fully clickable for the dropdown to open. Even when I try adding margin instead of padding, it only makes things worse. Can someone help me figure out what mistake I'm making here? Essentially, my goal ...

javascriptjqueryhtmlcsstwitter-bootstrap

CSS not working when attempting to override Angular (13) Material file

In my Angular (13) application with Material, I have developed a CSS file specifically for overriding certain Material styles. This CSS file is imported into the styles.scss file as the last line. However, despite importing the external file, the CSS def ...

cssangularangular-material

When using jQuery to enable contenthover on divs, they will now start a new line instead of

I've been working on achieving a layout similar to this, with the contenthover script in action: Mockup Draft Of Desired Look However, the result I'm getting is different from what I expected, it can be seen here. The images are not aligning co ...

javascriptjquerycss

The multiple-choice selection tool is not displaying any choices

I am having an issue with my ng-repeat code in conjunction with the jquery multiple-select plugin. Despite using this plugin for a multiple select functionality, the options generated by ng-repeat are not visible. Below is the code snippet in question: & ...

javascriptjqueryhtmlcssangularjs

Attempting to use jQuery on click to set the background image of a div to a base64 encoded data image

Check out what I'm working on here The first div contains html with data:image;base64 <div id="large_photo_null" style="width:50px; height:50px; background-image: url( data:image;base64,R0lGODlhR.. );" > </div> When using html, the ba ...

javascriptjquerycss

What is the best method to "deactivate" a radio button while ensuring that a screen reader can still read the text and notify the user that it is inactive?

My current situation involves needing to deactivate certain radio buttons, while still having the option to reactivate them later. When I use the disabled attribute, screen readers will overlook this field and miss key information. I am seeking an accessi ...

javascripthtmlcssaccessibility

What is the best way to create a website where images align perfectly with stacked cards?

Having trouble aligning the image on the right side of my website with two cards on the left side. Here is an example of what I'm aiming for: (https://i.sstatic.net/fBvTQ.jpg)](https://i.sstatic.net/fBvTQ.jpg) This is the current code: <!doctyp ...

htmlcssbootstrap-5

The two items are not situated side by side

Trying to make my page responsive, but when I inspect and look into mobile view, the elements do not align next to each other like they do on desktop. https://i.sstatic.net/8WhxD.png I want the shopping cart icon and button to be positioned next to each o ...

htmlcssbootstrap-5

Adjust jQuery UI's resize functionality to maintain the current total width

I arranged two containers horizontally using the position: absolute property. I am attempting to create a "resize bar" in the center that, when dragged, will expand one container while shrinking the other (thus maintaining the overall width). <div clas ...

jqueryhtmlcssjquery-uiresize

``Text Aligns Perfectly in the Middle Horizontally, yet Shifts Slightly Off-C

Two rectangular divs were created, each measuring 60px wide and 150px tall with text inside. The goal was to align the text vertically within the rectangles, achieved by using transform: rotate(-90deg). The challenge arose when trying to center the vertic ...

htmlcss

"Keep the div locked to the screen when the bottom of the div aligns with the

Hey everyone! I'm currently grappling with a project that requires me to keep a div stuck to the screen (prevent scrolling) when its bottom reaches the bottom of the screen. I have two divs on the page, both with varying heights. My aim is to keep div ...

javascriptjqueryhtmlcss

Button to access overlay menu on my map with OpenLayers 3

I am trying to add a menu button on top of my map that, when clicked, will display a window. I have created the map div and the overlayMenu button div, but unfortunately, the button is not showing up where I want it to. I would like the button to be locate ...

javascriptjqueryhtmlcss

Move an object in relation to the right boundary of the viewport

I have a div that starts off the screen due to this CSS code: transform: translateX(100%); Now, I am looking to bring this div back into view by a specific distance from the right side. Although I have tried using transform: translateX(-450px), it seems ...

csscss-transforms

Incorporating a Bootstrap table within another table and adjusting the table height

I am facing a minor issue on my website. I am utilizing bootstrap 4 and within the table box, I have nested another table as shown in the image below. How can I adjust the height of the inner table to match the height of the box (td)? https://i.sstatic.ne ...

htmlcsshtml-tabletwitter-bootstrap-4