Utilizing Bootstrap tabs to showcase several cards in a single row

Can anyone help me figure out how to display multiple cards side by side under Bootstrap 4 tabs? The cards show up fine without the tabs, but as soon as I add the tabs, they stack vertically regardless of the width.

I have tried including the cards both inside and outside the tabs, but only the ones outside seem to work properly. Any suggestions?

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <link href="css/style.css" rel="stylesheet">

  <title>Tracking DB</title>
</head>

<body>

  <div class='container-fluid'>

    <div class='col-md-5'>
      <div class='row module-row'>

        <div class='col-md-4'>
          <div class='card'>
            <div class='card-header module-card-header bg-secondary text-light'>
              <div class=''>Weight</div>
            </div>
            <div class='card-body module-card-body'>
              <div>Weight Start: 215 lbs</div>
              <div>Weight Current: 213 lbs</div>
              <div>Weight Average: 285.7 lbs</div>
            </div>
          </div>
        </div>

        <div class='col-md-4'>
          <div class='card'>
            <div class='card-header module-card-header bg-secondary text-light'>
              <div class=''>Fitness</div>
            </div>
            <div class='card-body module-card-body'>100 burpee Wednesday - 511 (8)<br>2 minute burpees - 711 (25)</div>
          </div>
        </div>

      </div>

      <div class='row'>

        <nav>
          <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-first-tab" data-toggle="tab" href="#nav-first" role="tab" aria-controls="nav-first" aria-selected="true">First</a>
            <a class="nav-item nav-link" id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab" aria-controls="nav-second" aria-selected="false">Second</a>
            <a class="nav-item nav-link" id="nav-third-tab" data-toggle="tab" href="#nav-third" role="tab" aria-controls="nav-third" aria-selected="false">Third</a>
          </div>
        </nav>
      </div>
      <div class='row'>

        <div class="tab-content" id="nav-tabContent">
          <div class="tab-pane fade show active" id="nav-first" role="tabpanel" aria-labelledby="nav-first-tab">
            <div class='col-md-4'>
              <div class='card'>
                <div class='card-header module-card-header bg-secondary text-light'>
                  <div class=''>Weight</div>
                </div>
                <div class='card-body module-card-body'>
                  <div>Weight Start: 215 lbs</div>
                  <div>Weight Current: 213 lbs</div>
                  <div>Weight Average: 285.7 lbs</div>
                </div>
              </div>
            </div>

            <div class='col-md-4'>
              <div class='card'>
                <div class='card-header module-card-header bg-secondary text-light'>
                  <div class=''>Fitness</div>
                </div>
                <div class='card-body module-card-body'>100 burpee Wednesday - 511 (8)<br>2 minute burpees - 711</div>
              </div>
            </div>

          </div>

          <div class="tab-pane fade" id="nav-second" role="tabpanel" aria-labelledby="nav-second-tab">
            This is the content on the second tab
          </div>

          <div class="tab-pane fade" id="nav-third" role="tabpanel" aria-labelledby="nav-third-tab">
            Nothing on the third tab
          </div>

        </div>

      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

This issue is directly related to how you are nesting elements within your Bootstrap grid system. By constantly dividing rows into columns and nesting further rows within those columns, you end up creating narrower and narrower columns, effectively subdividing the available space multiple times.

It's important to ensure that the .row element directly wraps around the .col divs for a more predictable end result.

I've included some HTML comments within the provided code snippet:

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <link href="css/style.css" rel="stylesheet">

  <title>Tracking DB</title>
</head>

<body>

  <div class='container-fluid'>

    <div class='col-md-5'>
      <div class='row module-row'>

        <div class='col-md-4'>
          <div class='card'>
            <div class='card-header module-card-header bg-secondary text-light'>
              <div class=''>Weight</div>
            </div>
            <div class='card-body module-card-body'>
              <div>Weight Start: 215 lbs</div>
              <div>Weight Current: 213 lbs</div>
              <div>Weight Average: 285.7 lbs</div>
            </div>
          </div>
        </div>

        <div class='col-md-4'>
          <div class='card'>
            <div class='card-header module-card-header bg-secondary text-light'>
              <div class=''>Fitness</div>
            </div>
            <div class='card-body module-card-body'>100 burpee Wednesday - 511 (8)<br>2 minute burpees - 711 (25)</div>
          </div>
        </div>

      </div>

      <div class='row'>

        <nav>
          <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-first-tab" data-toggle="tab" href="#nav-first" role="tab" aria-controls="nav-first" aria-selected="true">First</a>
            <a class="nav-item nav-link" id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab" aria-controls="nav-second" aria-selected="false">Second</a>
            <a class="nav-item nav-link" id="nav-third-tab" data-toggle="tab" href="#nav-third" role="tab" aria-controls="nav-third" aria-selected="false">Third</a>
          </div>
        </nav>
      </div>
      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-first" role="tabpanel" aria-labelledby="nav-first-tab">
          <div class='row'><!-- Placing this row directly wrapping the child columns -->
            <div class='col-md-6 col-xs-6'><!-- Adjusted width specification -->
              <div class='card'>
                <div class='card-header module-card-header bg-secondary text-light'>
                  <div class=''>Weight</div>
                </div>
                <div class='card-body module-card-body'>
                  <div>Weight Start: 215 lbs</div>
                  <div>Weight Current: 213 lbs</div>
                  <div>Weight Average: 285.7 lbs</div>
                </div>
              </div>
            </div>

            <div class='col-md-6 col-xs-6'>
              <div class='card'>
                <div class='card-header module-card-header bg-secondary text-light'>
                  <div class=''>Fitness</div>
                </div>
                <div class='card-body module-card-body'>100 burpee Wednesday - 511 (8)<br>2 minute burpees - 711</div>
              </div>
            </div>
          </div>
        </div>

        <div class="tab-pane fade" id="nav-second" role="tabpanel" aria-labelledby="nav-second-tab">
          This is the content on the second tab
        </div>

        <div class="tab-pane fade" id="nav-third" role="tabpanel" aria-labelledby="nav-third-tab">
          Nothing on the third tab
        </div>

      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>

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

Show the HTML page returned by the server on the client side

Hey there! I've come across a PHP code snippet that sends back an HTML file as a response. This PHP code makes use of the include method to send the file. When I'm on the client side, I'm employing AJAX. Upon typing console.log(data) (with ...

javascriptphpjqueryhtmlajax

Comparing two popular JavaScript libraries for 2D rendering: pixie.js vs three.js

When it comes to rendering 2D graphics using WebGL, there are a limited number of JavaScript libraries available. After some research, I have discovered that the two most popular choices are three.js and pixi.js. Both of these libraries offer the flexibili ...

javascripthtmlperformancethree.jswebgl

Steps to incorporate a session into an HTML login form

Need assistance with adding a session to my HTML form connected to MySQL database. The database updates whenever the page is reloaded or when a failed submission occurs. Can anyone provide a solution for this? <body> <?php // define variables a ...

phphtmlsession

Generating various header graphics through PHP's header include feature

I'm currently working on a multi-page website that utilizes a header include feature. The background image is already set within a container in the header using CSS, but now I want to have different header images for each page. Since I am still new to ...

phphtmlcss

Enlarging the modal overlay

My Angular/Bootstrap app features a small text area within a modal window that often contains lengthy content exceeding the size of the textarea and modal itself. I am looking to incorporate a button within the modal window that, when clicked, opens a lar ...

javascripthtmlangularjstwitter-bootstrapangular-ui-bootstrap

Please refrain from initiating the next action until the previous action has been completed

As a beginner, I am currently working on a photo viewer project using JavaScript and jQuery. My main issue arises when clicking on the arrow to view the next picture. I want the current picture to fade out smoothly before the new one fades in. However, th ...

javascriptjqueryhtmlcsscallback

Tips for substituting @media (max-width) with Stylish or Greasemonkey?

I am encountering an issue when trying to access this specific website on my desktop browser. The site has a responsive/fluid design that switches to displaying a mobile menu button instead of a horizontal nav-bar when the browser width is less than 990px. ...

cssgreasemonkeytampermonkeystylish

What causes the checkboxes to shift positions when selected in Safari?

I have encountered an issue with a set of values and checkboxes that are pre-checked on this webpage. Everything seems to be working smoothly in all browsers except for Safari. Whenever I try to click on any of the checkboxes, they seem to 'jump' ...

cssformscheckboxsafari

Issue with Selenium and JUnit - alert not found error message

I have integrated selenium junit into my project. However, upon running the test, I encountered the following error: org.openqa.selenium.NoAlertPresentException: no such alert The expected behavior is to display a confirmation alert after clicking a butto ...

javahtmlseleniumjunit

Break up a list into separate paragraphs and style each word using individual CSS

I have a user-generated paragraph that consists of a list of words separated by commas, such as "dog, cat, hamster, turtle." I want to be able to individually assign attributes to each word in the list. Check out this image for reference In the example i ...

javascripthtmlcss

Trigger a function from a Bootstrap modal

Here is a preview of my HTML code : <form action="form2_action.php" method="post"> <table> <tr> <td>First Name </td> <td>:</td> <td><input type="text" id="f ...

javascriptjqueryhtmlcsstwitter-bootstrap

Guide on altering the background color of dynamically generated textboxes in R Shiny

textInput(paste0("inp1-", wid),label = NULL,value = record$Current_week) This code was used to dynamically generate text input boxes, where the id for each box is determined by a number called wid. I attempted to change the background color using the fol ...

cssrshiny

Setting a class for a specific date on a jQuery UI calendar using the MultipleDates plugin

I recently encountered an issue with the Multiple Dates picker for jQuery UI date picker. It seems that the developer who created it has not updated it in quite some time, resulting in pre-highlighting dates no longer functioning properly. To address this ...

javascriptjquerycssjquery-ui

Internet Explorer does not show SVG HTML links, while they are visible on Chrome and Firefox

Presently, I have a graph being displayed with text and links located beneath the graph. The entirety of the code is crafted in SVG format. Below you will find my text code, followed by my html code. The text renders properly on all tested browsers (includ ...

htmlinternet-explorersvg

Extracting data about music playlists from a platform

I am attempting to extract the names of artists and songs from the online log of a daily radio show that I enjoy. My goal is to use Python to create a playlist on Spotify or YouTube using this data. Why does my code fail to fetch and display all of the so ...

pythonhtmlbeautifulsoupscreen-scraping

The inner panel height does not extend to 100% when there is overflow

When pressing the submit button on a panel containing components, an overlay appears but does not cover the entire parent panel if scrolled to the bottom. Additionally, I want the spinner to always be centered, whether scrolling or not. I've tried usi ...

htmlcssangular

The issue of JQuery mobile customizing horizontal radio buttons failing to function on physical devices has been identified

Not long ago, I posed a query on Stackoverflow regarding the customization of horizontal jQuery-mobile radio buttons. You can find the original post by following this link How to customize horizontal jQuery-mobile radio buttons. A developer promptly respon ...

javascriptjquerycssjquery-mobilejquery-mobile-radio

Learn how to display two different videos in a single HTML5 video player

Seeking a solution to play two different videos in one video element, I have found that only the first source plays. Is jQuery the answer for this problem? HTML Code: <video autoplay loop id="bbgVid"> <source src="style/mpVideos/mpv1.mp4" type ...

javascriptjqueryhtmlvideo

Blend the background color seamlessly with the image without affecting the content

Take a look at the JS Fiddle provided below, it should clarify things. Right now, I have applied a negative margin to the image causing it to overlap the entire red block. What I'm actually aiming for is to have the image overlap only the red backgrou ...

htmlcss

What is the best way to align text and images for list items on the same line?

HTML:- ul { list-style-image: url(https://i.sstatic.net/yGSp1.png); } <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li> <li>Lorem ipsum dolor sit amet, consectetur adipisici ...

htmlcss