Using Bootstrap's nav-pills inside a table

Is there a way to incorporate Bootstrap Nav Pills into a table, with the "tab buttons" located in the last row of the table? I've attempted it but it doesn't seem to be functioning correctly.

Check out this link for reference

    <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>
      <td></td>
      <td> <a data-toggle="tab" href="#home">BUTTON HERE</a>    </td>
      <td> <a data-toggle="tab" href="#profile">BUTTON HERE</a> </td>
      <td> <a data-toggle="tab" href="#contact">BUTTON HERE</a> </td>
    </tr>
  </tbody>
</table>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel">...home..</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...profile...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel">...contact...</div>
</div>
javascriptcsstwitter-bootstrapbootstrap-4

Answer №1

If you want to make this setup work smoothly, there are a few things to keep in mind:

  • Ensure that the classes nav-tabs and tab-content are siblings to each other by placing the table inside a div with the class nav-tabs.
  • Make sure that the DOM elements with the attribute data-toggle="tab" are also siblings to each other. You can achieve this by moving the data-toggle="tab" from the <a> tags within the <td> elements to the <td> elements themselves.

Below is a functional code snippet for your reference:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="nav nav-tabs">

  <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 class="nav nav-tabs">
        <th>3</th>
        <td data-toggle="tab" href="#home"> <a>BUTTON HERE</a> </td>
        <td data-toggle="tab" href="#profile"> <a>BUTTON HERE</a> </td>
        <td data-toggle="tab" href="#contact"> <a>BUTTON HERE</a> </td>
      </tr>
    </tbody>
  </table>
</div>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade active" id="home" role="tabpanel">...home..</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...profile...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel">...contact...</div>
</div>

Based on the feedback provided by the questioner, I have adjusted the previous code accordingly.

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

Getting the Mongoose Model using Express parameters is a simple process

Is it possible to dynamically fetch a mongoose model based on the req.params.model? Check out this example of a Schema const mongoose = require("mongoose"); const Schema = mongoose.Schema; const SmartSchema = new Schema({ SmartPriority: { type: Stri ...

javascriptnode.jsmongodbexpressmongoose

Using Javascript in the Model-View-Controller (MVC) pattern to load images stored as byte

Despite the numerous solutions available on Stack Overflow, I am still unable to get any of them to work... I am faced with the challenge of setting the "src" attribute of an image tag using a byte array obtained from an ajax call to my controller in Java ...

javascriptajaximagearrayssrc

Managing 404 errors when loading cached scripts with jQuery

I need to load a JS file using jQuery, but I want the cache to be used if available. Unfortunately, I can't set the global ajax cache setting to true for reasons beyond the scope of this post. This means using the getScript method is not an option. Fo ...

javascriptjqueryajaxcaching

Execute an AJAX post request to the identical PHP page (utilizing the Jquery Form Plugin)

I am in the process of developing a new web interface using JavaTMP, an AJAX-based admin template. After spending time understanding its functionality, I have created a page with a form to allow users to create projects within my software. Typically, creat ...

javascriptphphtmlajax

What is the best way to collapse a button in asp.net using javascript after setting it to hidden?

I have a scenario where I have 3 buttons in a row on my asp.net page. Using JavaScript, I am setting the middle button (ButtonSR) to invisible. However, I want the button below it to move up and take its place instead of leaving an empty space. ...

javascripthtmlasp.net

Capturing the dynamic server response with nested JSON structures

I am in the process of creating a dynamic data-binding function named assemble that requires two input parameters: server response (JSON) - nested JSON object. instruction set (JSON) - a configuration object that dictates the binding. The Issue: The cur ...

javascriptjsonmongodbdata-bindingnosql

Determining the decimal width of an element using jQuery

I've been searching everywhere for a method to accurately determine the width of an element without rounding. The reason behind this is that I have multiple elements floated to the left with display inline-block and I am attempting to automatically ad ...

jqueryhtmlcss

Resolving CORS Issue with Passport in Node.js

I have exhausted all efforts to integrate passport into my application without success. Every login attempt with various providers (Facebook, Google, Twitter, Microsoft) has resulted in an error message similar to this: XMLHttpRequest cannot load https:// ...

javascriptexpresscorspassport.js

Baffling Visibility Issue: iframe's Transparency Lost in Chrome and IE, Only Visible in Firefox

I have encountered a puzzling issue: http://jsfiddle.net/akosk/t2KvE/8/ HTML <div id='base'> <iframe id="myFrame" src="about:blank" frameborder="0" allowTransparency="true"></iframe> </div> <script id="conte ...

htmlcss

Updating content on a webpage via AJAX request without altering the original source code

Within the body of our document, referred to as "form.php," we have the following components: At the head section, there is a JavaScript code block: <script> function showUser(str) { if (str == "") { document.getElementById("txtHint").i ...

javascriptphphtmlajax

Utilize Google's Places Direction API Autocomplete feature to pre-select the starting location

I am currently utilizing draggable markers along with 2 autocompletes to assist with obtaining directions. You can find more information about this setup here: https://developers.google.com/maps/documentation/javascript/examples/directions-draggable. With ...

javascriptgoogle-mapsautocomplete

Exemplary CSS Text Alignment When Vertical Align is Exceptional

I'm currently working on a menu where some text needs to be aligned vertically with the property vertical-align:super. However, I am facing an issue where this particular item with "super" text is not aligning properly with the other items. Below is ...

cssmenuvertical-alignmentsuper

The response from the $.ajax call encounters an issue with the content-Type being set to application/json when the content is

Having a bit of trouble with the response content type. Here's the jQuery ajax request code I'm using: var settings = { dataType: 'json', url: 'services/loadTemplate.ashx', data: JSON.stringif ...

javascriptjqueryajaxjsonhttphandler

What's causing Angular to not display my CSS properly?

I am encountering an issue with the angular2-seed application. It seems unable to render my css when I place it in the index.html. index.html <!DOCTYPE html> <html lang="en"> <head> <base href="<%= APP_BASE %>"> < ...

javascripthtmlcssangulartypescript

Disable the off-canvas sidebar when a link is clicked in Jasny Bootstrap

Working on a website located at When viewing the site on mobile devices ( < 768px ), I am struggling with getting the off-canvas navigation to automatically close after clicking on one of its links. Any assistance would be greatly appreciated as I&apos ...

jquerytwitter-bootstrapjasny-bootstrap

The card header in Bootstrap card grid does not have the ability to extend all the way to the edge of

Utilizing bootstrap 4 within Laravel, I create blade.php template files. Here is a snippet of my code. The card grid layout appears satisfactory, however, there seems to be some empty space between the card titles and the edges of the cards. <div id=" ...

htmlcsslaravelbootstrap-4bootstrap-cards

Configuring route for serving static files in an Express server

I'm completely new to working with express, but I am eager to learn and follow the best practices. My goal is to serve files like CSS or index.html from a folder called 'public'. I have seen examples using .use and .get methods as shown belo ...

javascriptnode.jsexpress

Accessing HTML elements that are created dynamically in AngularJS

I am facing an issue where I cannot access a function within a newly created DOM element. Despite my best efforts, I can't seem to figure out what is causing this problem. $scope.createCustomHTMLContent = function(img, evtTime, cmname, evt, cust, ser ...

javascriptjqueryhtmlangularjsgoogle-visualization

Unable to interact with a button through JavaScript using execute_script in Selenium

https://i.stack.imgur.com/hJmtK.png I am attempting to remove a cookies popup by accepting the cookies and clicking confirm. While I am able to click an input labeled "zgadzam się na", for some reason, clicking a button with the label "potwierdź" appears ...

javascriptpythonseleniumselenium-webdriverautomated-tests

Understanding the functionality of a notification system

Planning to create an admin tasking system utilizing PHP, MySQL, and JavaScript. Curious about how the notification system operates and how it stores real-time data. Are there any good examples of a notification system? ...

javascriptphp