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

Modify the transparency of a form's backdrop without affecting the input fields

I'm attempting to achieve a similar effect as shown in this example on my website form. I've tried using opacity to make the form field background only 20% visible, but it ends up affecting the text inside and when typing. Is there a way to apply ...

cssopacity

Adjusting element position while scrolling

Objective The goal is to have the page navigation display lower on the page by default. This will provide a cleaner layout as shown in the image below. Context An interactive element for navigation was implemented utilizing Headroom.js. This library d ...

javascriptjqueryhtmlcss

Arrange the elements in an HTML table with the first and last columns on the left and right sides

Is it feasible to have the first and last columns of an HTML table fixed while allowing the middle columns to be scrollable? (This functionality is achievable in jQuery DataTables, but what about a basic HTML table?) ...

htmlcsshtml-tablesticky

Ways to create a full-window image cover starting from the center point and extending to the right by 50

Seeking assistance from anyone who can help me with my current issue. I am currently utilizing bootsrap 4 and I need to come up with a solution for the following scenario: I have one element that is situated within the standard six columns, while the secon ...

htmlcssimagebootstrap-4grid

A guide on effectively selecting an element with the '@font-face' tag

I'm endeavoring to design a distinctive logo by utilizing a personalized font... and am keen on incorporating it into my CSS As an illustration: the identifier for my div element is "logo" Should I merely employ this code? #logo { font-family: ...

css

Tips for avoiding flickering in a background image when it is being changed

Utilizing JavaScript, I am setting a repeated background image from a canvas to a div in the following way: var img_canvas = document.createElement('canvas'); img_canvas.width = 16; img_canvas.height = 16; img_canvas.getContext('2d' ...

javascripthtmlcssimage

Positioning a div absolutely within a targeted div

Is there a way to set a div as absolute within a specific relative div rather than just the parent? For instance, I have a div that's nested inside of a row. However, I would like it to be positioned absolutely in the section instead of the row. Both ...

htmlcsscss-position

Arrangement of SVGs within one another

I am working on achieving a layout with multiple SVG elements arranged in a specific way. This layout involves a top-level gray box containing several orange boxes, each of which holds red boxes. The width and height of the top-level SVG are known. https: ...

htmlcsssvg

Steps for creating a resizable and automatically hiding side menu

I am working on a side menu that can be resized, and I want it to collapse (set to zero width) when it is empty. I have considered implementing one of these features individually, but I'm not sure how to make both work together. Is there a way to ad ...

javascriptcssvue.js

Can you explain the distinction between using element~element versus element+element?

Can you explain the variation between these two CSS selectors? When using them, I seem to receive the same outcome. In the HTML: <div>One</div> <p>Two</p> CSS Example #1: div+p { background:red; } This code assigns a red backgr ...

csscss-selectors

Differences between flexible and fixed-width columns in responsive grid layouts

Recently, I've been diving into the world of flexbox and creating my own grid system. Traditionally, when building a grid system using floats, you have to calculate the number of columns per layout and assign percentages for each column's width. ...

cssresponsive-designflexboxgrid-system

JS will reach its stopping point at the specified style.zIndex

I am currently in the process of setting up button elements. I have two scripts that correspond to different types of buttons - one script runs a simple collapse menu, while the other executes a more complex collapse by shifting depths and sliding one div ...

javascripthtmlcss

Adjust the appearance of a div according to the input value

When a user inputs the correct value (a number) into an input of type "number," I want a button to appear. I attempted var check=document.getElementById("buttonID").value == "1" followed by an if statement, but it seems I made a mistake somewhere. Here&ap ...

javascripthtmlcssbuttoninput

Unusual Box-shadow glitch experienced exclusively when scrolling in Chrome 51

While working on my website, I encountered a peculiar issue with the box-shadow in Chrome 51. My site has a fixed header with a box-shadow, but when I scroll up or down, the box-shadow leaves behind some marks (horizontal gray lines): https://i.stack.imgu ...

htmlcssgoogle-chromebox-shadow

Creating a multi-step progress bar in Yii2 that showcases completed steps using jQuery

Is there a way to automatically transition from one state to another once the order status changes in Yii2? var i = 1; $('.progress .circle').removeClass().addClass('circle'); $('.progress .bar').removeClass().addClass(&a ...

javascriptjqueryhtmlcssyii2

New ways to style Links in NextJs 13

I am relatively new to Next.js and I am attempting to create a menu with a hover effect using the following code: import Link from 'next/link'; const MenuItem = ({ href, label }) => ( <Link href={href} className="menu-item"> ...

cssreactjsnext.js

I am having trouble setting the z-index for the navigation component in Tailwind CSS and Next.js

Currently, I am immersed in a Next.js project that utilizes Tailwind.css. Within this project, there is a header component known as nav, styled as follows: <div className="sticky top-0 z-100 body bg-white flex flex-row items-center">Nav con ...

cssreactjsnext.jstailwind-cssz-index

Google Map with rounded corners that have a transparent design

Trying to create a circular Google map using CSS3 border-radius, but having issues with browsers other than Firefox. Here's the code snippet: <div class="map mapCircle" style="position: relative; background-color: transparent; overflow: hidden;"&g ...

cssgoogle-maps-api-3

Preventing text from wrapping in a TypeScript-generated form: Tips and tricks

I’m currently working on a ReactJS project and my objective is simple: I want all three <FormItem> components to be displayed in a single line without wrapping. However, I am facing the following output: https://i.stack.imgur.com/mxiIE.png Within ...

javascripthtmlcssreactjstypescript

JavaScript not properly rendering CSS styles

If I insert the following HTML statically, the CSS style is correctly applied. HTML: <li class="connector"> <a href="#"> <img src="css/images/temp/connector2.png" alt="" width="192" height="192"> <span class="sr-only"& ...

javascriptjqueryhtmlcss