Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Bootstrap tabs - multiple cards on the same row

Tags:

html

css

twitter-bootstrap

bootstrap-4

I'm trying to get multiple cards to show up beside each other under Bootstrap 4 tabs. I can get the cards to work fine without the tabs but when I add the tabs, the cards are only 1 per line (no matter the width).

This code shows the cards outside and inside the tabs (outside works, inside does not). Any ideas?

<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>
like image 431
Bluecapra Avatar asked Mar 06 '26 22:03

Bluecapra

1 Answers

This has everything to do with your nesting of elements. When you use bootstrap grid, you are constantly defining rows that are divided into columns. If you keep nesting rows in columns in rows, you will create ever more narrow columns. You're constantly subdividing the available space.

Also, I would recommend making sure that .row directly wraps .col divs. Your ends result will be much more predictable.

I added some html comments within the 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'><!-- I moved this row to directly wrap the children columns -->
            <div class='col-md-6 col-xs-6'><!-- also, adjsuted the specified width -->
              <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>
like image 113
Serg Chernata Avatar answered Mar 08 '26 10:03

Serg Chernata
Sign in to Comment

Related questions

Angular 6 - Keydown Space on Mobile

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!