CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstraptwitter-bootstrap-4
Adam Wells
Adam Wells

Reputation: 581

All Cards Not Getting Styled

I am attempting to make an example prototype that uses two cards from Bootstrap 4 to show the information from a form and hold the information from a second related form in the second card. Right now, it looks like this:

enter image description here

Here is a JSFiddle with the code which i've already taken the step of introducing a specific class and selector in the style tag.

 <!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <style>
      div.card {
        max-height: 50%;
        min-height: 30%;
      }

      .wuformheader {
        color: white;
        padding-bottom: 0px;
        background-color: blue;
      }

      ul.nav-tabs {
        border-bottom: 0px;
      }

      div.card-header li.nav-item> a.active {
        color: black;
        background-color: white;
      }

      div.card-header li.nav-item> a {
        color: white;
      }

    </style>
    <title>Review Template</title>
  </head>

  <body>
    <div class="card">
      <div class="card-header wuformheader">
        <ul class="nav nav-tabs" id="myTabs" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="nav-study-tab" data-toggle="tab" href="#study" role="tab" ari-controls="study" aria-selected="true">Study Information</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-dept-tab" data-toggle="tab" href="#dept" role="tab" ari-controls="dept" aria-selected="false">Department Information</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#contact" role="tab" ari-controls="contact" aria-selected="false">Contacts</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-lab-tab" data-toggle="tab" href="#lab" role="tab" ari-controls="lab" aria-selected="false">Laboratory</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-form-approvals-tab" data-toggle="tab" href="#formapprovals" role="tab" ari-controls="formapprovals" aria-selected="false">Approvals</a>
          </li>
        </ul>
      </div>
      <div class="card-body">
        <div class="tab-content" id="nav-formTabContent">
          <div class="tab-pane fade show active" id="study" role="tabpanel" aria-labelledby="nav-study-tab">
            Study Tab!
          </div>
          <div class="tab-pane fade" id="dept" role="tabpanel" aria-labelledby="nav-dept-tab">
            Department Tab!
          </div>
          <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="nav-dept-tab">
            Contacts Tab!
          </div>
          <div class="tab-pane fade" id="lab" role="tabpanel" aria-labelledby="nav-dept-tab">
            Labs!
          </div>
          <div class="tab-pane fade" id="formapprovals" role="tabpanel" aria-labelledby="nav-form-approvals-tab">
            formapprovals!
          </div>
        </div>
      </div>
    </div>
    <br/>
    <div class="card">
      <div="card-header wuformheader">
        <ul class="nav nav-tabs" id="review-tabs" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="nav-notes-tab" data-toggle="tab" href="#notes" role="tab" ari-controls="notes" aria-selected="true">Notes</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-criteria-tab" data-toggle="tab" href="#criteria" role="tab" ari-controls="criteria" aria-selected="false">Criteria</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-approvals-tab" data-toggle="tab" href="#reviewapprovals" role="tab" ari-controls="reviewapprovals" aria-selected="true">Approval</a>
          </li>
        </ul>
    </div>
    <div="card-body">
      <div class="tab-content" id="nav-reviewTabContent">
        <div class="tab-pane fade show active" id="notes" role="tabpanel" aria-labelledby="nav-notes-tab">
          Notes tab
        </div>
        <div class="tab-pane fade" id="criteria" role="tabpanel" aria-labelledby="nav-criteria-tab">
          Criteria Tab
        </div>
        <div class="tab-pane fade" id="reviewapprovals" role="tabpanel" aria-labelledby="nav-approvals-tab">
          Approvals
        </div>
      </div>
      </div>
      </div>


      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
  </body>

</html>

What needs to change for both cards to have the correct (Top in the image) styling?

Upvotes: 2

Views: 61

Answers (1)

Iulius
Iulius

Reputation: 678

You have a typo in your html on line 83 in your jsfiddle:

<div="card-header wuformheader">

It should be:

<div class="card-header wuformheader">

You deleted the word "class"

Upvotes: 3

Related Questions