Is Bootstrap causing columns to not change colors as expected?

I've been attempting to alter the colors of the column names, but they remain white. Here's an example:

<div class="table-responsive">
    <button id="exportButton" class="btn btn-primary">Button</button>
    <table class="table table-bordered table-hover custom-table">
        <thead class="thead-light">
                <tr>
                    <th class="text-truncate">#1</th>
                    <th class="text-truncate">#1</th>
                    <th class="text-truncate">#1</th>
                    <th class="text-truncate">#1</th>
                    <th class="text-truncate">#1</th>
                    <th class="text-truncate">#1</th>
                    <th class="text-truncate">#1</th>
                    <th class="text-truncate">#1</th>
                    <th class="text-truncate">#1</th>
                    <th class="text-truncate">#1</th>
                    <th class="text-truncate">#1</th>
                </tr>

I added: custom-table and then applied a style:

.custom-table {
    background-color: rgb(249, 159, 25);
}

The color isn't being applied. Any ideas why?

Have tried various alternatives without success

EDIT #1: This is my complete code, please check it out:

<div class="tab-pane fade" id="TAB2" role="tabpanel">
    <div class="table-responsive">
        <button id="exportButton" class="btn btn-primary">bUTTON</button>
        <table class="table table-bordered table-hover custom-table">
            <thead class="thead-light">
                    <tr>
                        <th class="text-truncate">#1</th>
                        <th class="text-truncate">#1</th>
                        <th class="text-truncate">#1</th>
                        <th class="text-truncate">#1</th>
                        <th class="text-truncate">#1</th>
                        <th class="text-truncate">#1</th>
                        <th class="text-truncate">#1</th>
                        <th class="text-truncate">#1</th>
                        <th class="text-truncate">#1</th>
                        <th class="text-truncate">#1</th>
                        <th class="text-truncate">#1</th>
                    </tr>
            </thead>
            <tbody>
                {% for dato in datos_#1 %}
                    <tr>
                        <td>{{ dato.#1 }}</td>
                        <td>{{ dato.#1}}</td>
                        <td class="text-truncate">{{ dato.#1}}</td>
                        <td>{{ dato.#1}}</td>
                        <td>{{ dato.#1}}</td>
                        <td class="text-truncate">{{ dato.#1}}</td>
                        <td>{{ dato.#1}}</td>
                        <td class="text-truncate"><a href="{{ dato.#1}}" target="_blank">ME</a></td>
                        <td class="text-truncate">{{ dato.#1}}</td>
                        <td>{{ dato.#1}}</td>
                        <td class="text-truncate"><a href="{{ dato.#1}}" 
target="_blank">mE</a></td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

Can't figure out why it's not working properly :/

htmlcssbootstrap-4bootstrap-5

Answer №1

If you want to add a background color to your table, remember to close the table tag properly and insert some content. This will allow you to visualize the background color effectively.

 <div class="table-responsive">
  <button id="exportButton" class="btn btn-primary">Button</button>
  <table class="table table-bordered table-hover custom-table">
      <thead class="thead-light">
              <tr>
                  <th class="text-truncate">#1</th>
                  <th class="text-truncate">#1</th>
                  <th class="text-truncate">#1</th>
                  <th class="text-truncate">#1</th>
                  <th class="text-truncate">#1</th>
                  <th class="text-truncate">#1</th>
                  <th class="text-truncate">#1</th>
                  <th class="text-truncate">#1</th>
                  <th class="text-truncate">#1</th>
                  <th class="text-truncate">#1</th>
                  <th class="text-truncate">#1</th>
              </tr>
      </thead>
      <tbody>
        <td>This is just a demo.</td>
      </tbody>
  </table>
</div>

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

JavaScript may not display height as anticipated

Currently, I am experimenting with JavaScript in order to achieve a website section that is 100% the height of the screen minus the "nav" bar. Imagine it as having two visible components - the first one being large and the second one small at the bottom. ...

javascriptjqueryhtmlcss

Saving a picture to local storage with the file input type in ReactJS

I am attempting to save an image in the browser storage once a user selects an image from their computer. <div className="add_grp_image_div margin_bottom"> <img src={img_upload} className="add_grp_image"/> <input type="file" class ...

javascripthtmlcssreactjs

How can the presence of a CSS rule prevent another from being applied?

My attempt to create this HTML file in Chrome posed some challenges: <style> br { }​ [required] { border-width: 3px; border-color: red; } </style> <input required /> The entire content of the file is shown above. However, I noti ...

htmlcssgoogle-chrome

The content loses functionality once I add an overlay color to the background image div

I'm facing an issue with a div that has a background image, text, and a button in the center. Whenever I add an overlay color on top of the background image, the text and button seem to be disabled or unclickable. My goal is to ensure that the Read M ...

javascriptjqueryhtmlcss

Tips for using jQuery to dynamically apply CSS styles to new content added to a webpage

I have encountered this question multiple times on stackoverflow and through google search, but unfortunately none of the suggested solutions have worked for me. My issue involves a page that loads an HTML page with empty sections, which are then dynamica ...

jquerycssdynamic

What is the best way to add custom styles to an Ext JS 'tabpanel' xtype using the 'style

Is there a way to change the style of a Ext.tab.Panel element using inline CSS structure like how it's done for a xtype: button element? { xtype: "button", itemId: "imageUploadButton1", text: "Uploader", style: { background : ' ...

javascriptcssjsonextjs

Steps for embedding JavaScript code within HTML tags using a JavaScript file

Working on a React web app, I am solely using js and css files without any html. In one of my js files, there is a mix of html and js code like this: class Teams extends Component { state = { teams: [] } componentDidMount() { ...

javascripthtmlreactjs

Utilize CSS to create a visual buffer at the bottom of the header

I'm having trouble creating a gap between the bottom of "headermenu" and the top of "list". No matter what values I use for margin-bottom or padding-bottom, the table won't budge. I could try adding margin-top to the table, but I would prefer to ...

htmlcss

Utilizing jQuery to Execute a Function Upon Addition or Removal of Class Names

Currently, I am working on a function that includes a conditional statement to display an alert when a specific class name is removed from a div layer. Below is the code snippet: <div class="ui-tabs-panel ui-tabs-hide">panel</div> <div>& ...

jquerycssfunctionevent-handling

The scss function is returning an invalid property value

In my Angular project, I have organized my scss files/folders in the following way: 1) Settings - containing color settings and functions for the project 2) Files and folders defining variables such as fonts, widths, etc. for components and pages 3) Fil ...

cssangularsass

Align the elements of the contact form to the opposite sides

I am experiencing an issue with my contact form where all elements are flowing horizontally instead of vertically. I would like everything to be floated to the left and aligned vertically, except for the "message" box and submit button which should be on t ...

csscss-floatcontact-form

A pop-up appears, prompting me to redirect to an external URL when clicking on a link that opens in a new tab on my WordPress website

Seeking assistance in dealing with a popup that appears when trying to open a link redirected to an external URL. The popup prompts for permission to open the link in a new tab. Upon inspecting the Element, the code snippet below is revealed: <div cla ...

javascripthtmljquerywordpress

What is the best way to adjust the layout of these two elements using CSS in order to display them on

I need assistance with adjusting the layout of a dropdown list next to its label in an Angular html page. <div *ngIf="this.userRole == 'myrequests'" class="col-2" [ngClass]="{ 'd-none': view != 'list&apo ...

cssangulartypescriptbootstrap-4

What is the best way to horizontally align a div within a parent div?

I'm having trouble centering the red div containing three child elements (h1, h3, and button) within a green container div using CSS. I initially attempted to center the red div vertically and horizontally on its own, but after some research, I learne ...

cssflexboxcentering

Make the inner div within the td stretch to cover the entire height of the td

Inside the first tds, there is dynamic text content that automatically expands the trs and tds. However, the second tds have a div with a background image but no text inside. I want these divs with background images to expand or collapse along with the tab ...

htmlcss

Implement a conditional statement in Angular 5 to dynamically control the layout of Bootstrap columns in

I am facing an issue in my Angular 5 project where I need to display certain columns based on specific conditions. Recently, I updated Bootstrap to version 4 and now I am encountering a problem with conditional templates. Some columns with the "ng-star-in ...

angularbootstrap-4

Is there a way to reduce the excessive bottom margin on Twitter embeds?

Is there a way to adjust the Twitter embed code for tweets so they don't have a large margin at the bottom? Here is an example of the standard Twitter embed code: <blockquote class="twitter-tweet"><p>@<a href="https://twitter.com/gami ...

phpjavascripthtml

Decoupling the Top Navigation Bar from the Side Navigation Bar

I currently have a top navigation bar with some menus and a side navigation bar with additional menus. I have applied styling to the vertical navigation bar, but it seems to be affecting all the navigation bars, resulting in an output as shown in the image ...

htmlcsstwitter-bootstrap

Tips for shifting a designated row upward in Chrome using JavaScript

Currently, I am working on a Javascript function that moves up a selected row. However, the issue I am facing is that when the row moves up, the old row is not being removed. For instance, if I move up the 'bbbb' row, it successfully moves up bu ...

javascriptjqueryhtmljquery-ui

Selenium in Java is unable to send keys or click on elements

I am attempting to login to this specific website Below is the code I am using : driver.findElement(By.id("userid_sebenarnya")).sendKeys("myUserName"); This is the property for the input text field with id='userid_sebenarnya' <div class="f ...

javahtmlselenium