Changing color schemes in bootstrap using class overrides vs. individually editing numerous .css files

I am aiming to customize the nav-pills to appear in a bold red color. After reviewing information on these two pages

I gathered that simply adding a predefined color within <div class ""> should suffice.

Desiring a vibrant red shade, I experimented with the following:

  • .bg-danger
  • red
  • btn btn-danger

Although switching from nav-pills to btn btn-danger altered the appearance, it was not as desired due to an overall unattractive form. This led me to believe that the pill vertical code may not be compatible with button colorization methods. Attempting to implement .bg-danger or red resulted in no visible changes. Despite 'red' not being listed on the referenced pages, I experimented because it is defined in the main bootstrap.css file.

:root {
lots of other colors;
--red: #dc3545;
lots of other colors;
}

I attempted variations such as red, -red, --red, .bg-red, and .bg--red without success. Noteworthy, I adjusted the color codes to match my preferred red here (using bootstrap's danger red to maintain consistency if I overlooked something).

How can I successfully override the color without directly editing the 4 css files? Or have I inadvertently chosen a feature that has limited customization?

Default code displaying pills in blue (assuming availability of the bootstrap files).

  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

The revised code utilizing the .bg--red modifier. Apologies for any formatting inconsistencies, my attempts at highlighting were unsuccessful using 

<pre class="prettyprint">...</pre>
.

<div class="col-3">
    <div class="nav flex-column nav-pills .bg--red" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

edit1 Just to clarify, my ultimate goal is to change the activated pill menu item to a captivating red instead of the default blue. Modifying the <div class=""> alteration has mostly affected the form background itself, resulting in an unattractive outcome; however, it did not alter the displayed activated pill background. I am uncertain if this level of customization is feasible without directly modifying the .css. Currently, the only way I can achieve the desired result is by directly editing the 4 .css files containing references to the pill colors. I am optimistic that there exists an approach to achieve this at a higher level, particularly if I wish to incorporate various menus with distinct color schemes.

cssbootstrap-4

Answer №1

It appears you are attempting to use bg-danger here, which is #dc3545 or "red" by default. Additionally, remember not to include a period before your class name when adding it to your HTML element.

<div class="nav flex-column nav-pills bg-danger" id="v-pills-tab" role="tablist" aria-orientation="vertical">

Ensure that you place it at the end of any other classes with background colors specified. The entire nav-pill section will display as red for danger.

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

Alignment of grid with absolute images in Bootstrap

Hello there! I am relatively new to the world of coding and also to this platform, so please forgive any mistakes I may make along the way. Recently, I've been working on a project to create a site similar to Picrew, but I seem to have hit a roadblock ...

htmlcsslayoutalignmentbootstrap-5

Creating a triangular shape using a div element

Struggling to create a triangular div? I used the border trick to make it, but now there's a transparent line slicing through the triangle like a dividing line. I've attempted various solutions to make that line solid, but nothing seems to be wor ...

htmlcsstwitter-bootstrap-3

Adjust the font size to fit the size of the button when resizing a md-button

Currently utilizing md-button with text inside An issue arises in low resolution where the text gets cut off, struggling to find a suitable solution If anyone has any suggestions on how to resolve this problem, please share. I have included screenshots ...

htmlcssangularjsangular-material

Adding a text stroke to the <input type="text"/> element

    Can anyone provide a solution for implementing text stroke in <input type="text"/> that works across all major browsers (Firefox, Google Chrome, Safari, Opera, IE7+)? Is there any method using CSS 2.1 or jQuery to achieve this effect? ...

jquerycssinputoutlinestroke

Applying font size constraints in TailwindCSS

Is it possible to implement the clamp() CSS function with TailwindCSS in order to create linear scaling for the fontSize within a defined range? I am specifically curious about how this can be integrated with Next.js. ...

cssreactjsnext.jstailwind-cssclamp

Is it feasible to adjust the width of a character?

Is there a way to determine the width of each character in a text area, either through setting or retrieval? <Field style={{ width: "60ch", height ...

cssreactjs

.htacces Disables Styling on Page

I've been trying to understand the functionality of .htaccess RewriteRule. Here is a URL example where I have experimented with .htaccess: http://example.com/test/home This used to be: http://example.com/test/index.php?p=1 My goal is to redirect ...

css.htaccess

Resolving Cross-Browser Issues with jQuery CSS Positioning on Hover of Div Elements

Struggling to create a jQuery interface that is functional across all browsers, although the current version should work on most Windows browsers. Check it out here: (Please keep in mind that the problematic part is kept minimal and the solution is expec ...

javascriptjquerycss

Tips for populating information in an ASP.NET MVC 5.2 class using a bootstrap "contact us" form and sending it to my email

My website features a "Contact Us" page where users can fill out a form to send me an email. The form requires users to input their first name, last name, email address, and a message using a Bootstrap 4.xxx form. However, I am facing an issue where the da ...

c#asp.net-mvcbootstrap-4form-submitasp.net-mvc-5.2

What is the best way to determine font size based on the width of the

In order to ensure that certain elements on my page do not exceed specific widths, it is crucial for me to use a monospaced font. This will limit the horizontal "stride" between characters to stay within a specified threshold. However, simply setting the ...

cssfonts

Issue with web bot functionality

My dynamic database page is filled with an array of hyperlinks. The layout consists of 3 columns: The first column pulls links directly from the database, the second adds a + link to each entry, and the third includes a - link Essentially, every row that ...

asp.netjquerysqlhtmlcss

Choose the span element within every other td that is not enclosed by an anchor tag

The table structure I am working with is as follows: <tr> <td> <a> <span> some content </span> </a> </td> <!-- td having straight span --> <td> <span> ...

javascriptjqueryhtmlcss

Is there a way to retrieve the filename of a file uploaded using a shiny fileInput function?

This shiny app has a feature where users land on the 'Upload data' panel upon launching. To restrict access to the other two 'tabpanels', users must first upload both necessary files in the 'Upload data' tab. The condition for ...

javascripthtmlcssrshiny

Display the division content from a user control without the need to open a separate window

Seeking assistance with a USER CONTROL containing a <div> element and a button. The goal is to successfully print the <div> content upon button click, regardless of the control's location. It's important that the printing process does ...

asp.netjavascriptcss

The Angular overlay panel remains open consistently

I recently developed an Angular component similar to p-overlaypanel, but I'm facing an issue where it remains open for every item I click. What I actually want is for only one overlay panel to be clicked and shown at a time - if I click on another ove ...

htmlcssangulartypescript

Grid element's height does not correspond to the responsive square child dimension

In my latest project, I am developing a web application using React and Material-ui. One of the challenges I have encountered is creating a responsive square div for a map component. Unfortunately, attempting to implement a solution from a trick on iamstev ...

htmlcssreactjsflexboxmaterial-ui

How Can You Create a Sliding List Animation (Up/Down) Using Angular and Twitter-Bootstrap?

Hey, can you give me a hand with this? :) I'm attempting to create a sleek sliding up and down list in Angular, but I'm struggling to make it work. My CSS skills are not very advanced, so I'm still learning and gave it my best shot: http:// ...

javascriptcssangularjstwitter-bootstrapcss-animations

I am keen on implementing the bootstrap template within a react project, however, I am encountering difficulties in incorporating the

Exploring how to implement a bootstrap template in React has been quite an interesting journey. After successfully importing all the necessary CSS files into my component page, I encountered an issue while trying to utilize the JavaScript files. Although ...

javascriptreactjsbootstrap-4

CSS Image Placement

If I have an image with a width of 2000px, where the snazzy design aspect is located about 600px in and spans about 900px. My goal is to use this image as the background for a website, ensuring that the snazzy design remains centered even when stretching t ...

css

Require an additional button to dynamically load more content and shift all existing elements further down the page

I am looking to implement a "load more" button for an Instagram feed on my website. My current approach involves increasing the height of a specific section while moving the rest of the page down. This is what I have tried: <script> $(document.ready ...

javascriptjqueryhtmlcss