Creating a sleek dark-themed table using Bootstrap's HTML

Question

Creating a sleek dark-themed table using Bootstrap's HTML

While browsing through https://getbootstrap.com/docs/4.0/content/tables/, I came across a table with a really dark background towards the bottom of the page. I tried copying the code into an HTML document, but it didn't seem to work. After tinkering with the code a bit, I still couldn't get it to display properly.

Does anyone know how I can successfully implement this table?

Please help!

Here is the code (from the site):

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>

I have managed to change the table to have a light background, but the dark version that I want displayed on the page just isn't working.

html css bootstrap-4

Answer 1

Answer №1

To create a dark-themed table, you can utilize the following method:

<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

If the bootstrap class does not work, it is recommended to define your own custom class in your CSS:

.table{
 background: #212529 !important;
  color: white !important;
}

HTML:

<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Hopefully, this information proves helpful. Best of luck!

Answer 2

To create a dark-themed table, you can utilize the following method:

<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

If the bootstrap class does not work, it is recommended to define your own custom class in your CSS:

.table{
 background: #212529 !important;
  color: white !important;
}

HTML:

<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Hopefully, this information proves helpful. Best of luck!

Answer 3

Answer №2

Have you included all the necessary files in your HTML documents?

I just tested the code on my end and it seems to be working perfectly fine.

Here is the output I received from the section of code you provided:

View the output on my computer

If this is the result you were expecting, you can refer to the code snippet below:

Make sure to include the thead tag in your own code if you plan to use it. For further information, visit https://getbootstrap.com/docs/4.0/content/tables/#table-head-options

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

    <body>
        <table class="table table-dark">
            <tbody>
                <tr class="bg-primary">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr class="bg-success">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr class="bg-warning">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
               <tr>
                   <td>1</td>
                   <td>2</td>
                   <td>3</td>
                   <td>4</td>
               </tr>
               <tr>
                   <td class="bg-primary">1</td>
                   <td class="bg-success">2</td>
                   <td class="bg-warning">3</td>
                   <td class="bg-danger">4</td>
               </tr>
           </tbody>
       </table>
   </body>

Answer 4

Have you included all the necessary files in your HTML documents?

I just tested the code on my end and it seems to be working perfectly fine.

Here is the output I received from the section of code you provided:

View the output on my computer

If this is the result you were expecting, you can refer to the code snippet below:

Make sure to include the thead tag in your own code if you plan to use it. For further information, visit https://getbootstrap.com/docs/4.0/content/tables/#table-head-options

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

    <body>
        <table class="table table-dark">
            <tbody>
                <tr class="bg-primary">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr class="bg-success">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr class="bg-warning">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
               <tr>
                   <td>1</td>
                   <td>2</td>
                   <td>3</td>
                   <td>4</td>
               </tr>
               <tr>
                   <td class="bg-primary">1</td>
                   <td class="bg-success">2</td>
                   <td class="bg-warning">3</td>
                   <td class="bg-danger">4</td>
               </tr>
           </tbody>
       </table>
   </body>

Creating a sleek dark-themed table using Bootstrap's HTML

Answer №1

Answer №2

Similar questions

How can you successfully submit empty <select ... multiple> HTML elements via POST method?

Require a date picker in Vuetify, prohibiting any kind of text input

DevExpress popup remains contained within the iframe and does not overflow beyond its boundaries

Error: Invalid Argument - The argument 'PanelController' is expected to be a function, but it is undefined

What is the best way to add borders to my website design?

Error in Compiling HTML Elements Collection<<Element>

Mysterious anomaly observed: Peculiar trajectory detected in canvas image during left

Develop interactive card collections in Bootstrap that adapt to different screen sizes

Modifying the color of the highlighted selection in a dropdown select box

having difficulty placing 3 pop-up windows on a single page

Footer displays within the content section

How to use jQuery to hide radio buttons that are not checked when clicking a submit

I have implemented the appropriate code to showcase a background color, yet it doesn't seem to be appearing on the screen. Additionally, I am utilizing Sass in this project

Perform the action when the button is clicked

What is the secret to aligning two elements flawlessly?

Find the HTML elements within an XDocument that need to be replaced and converted into Json format

Stylized with different images scattered across the browser window

Failure to trigger Bootstrap modal upon button activation

When bullet points are aligned in the middle of wrapped text instead of the top line

Tips for implementing SVG in background images on Internet Explorer