Unstyled Cards Failing to Receive Design

I am currently working on creating a prototype that utilizes two Bootstrap 4 cards to display information from a form and store related information from another form in the second card. The current layout of this setup can be observed below:

https://i.sstatic.net/8QeRh.png

This JSFiddle link contains the code I have been working on, which includes defining a specific class and selector within 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">
            Displaying Study Info.
          </div>
          <div class="tab-pane fade" id="dept" role="tabpanel" aria-labelledby="nav-dept-tab">
              Showing Department Details.
          </div>
          <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="nav-dept-tab">
            Contact Information.
          </div>
          <div class="tab-pane fade" id="lab" role="tabpanel" aria-labelledby="nav-Contact-tab">
            Laboratory Data!
          </div>
          <div class="tab-pane fade" id="formapprovals" role="tabpanel" aria-labelledby="nav-form-approvals-tab">
            Form Approval Status.
          </div>
        </div>
      </div>
    </div>
    <br/>

    <div class="card">
      <div class="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" aria-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" aria-controls="criteria" aria-selected="false">Criteria</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-approvals-tab" ata-toggle="tab" href="#reviewapprovals" role="tab" aria-controls="reviewapprovals" aria-selected="true">Approval</a>
          </li>
       </ul>
      </div>
      <div class="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 Section
          </div>
          <div class="tab-pane fade" id="criteria" role="tabpanel" aria-labelledby="nav-criteria-tab">
           Criteria Overview
          </div>
          <div class="tab-pane fade" id="reviewapprovals" role="tabpanel" aria-labelledby="nav-approvals-tab">
            Approvals Update
          </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/ScQsAP7hUibX39j7ffakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-alN7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHusaWwXHDli+4" crossorigin="anonymous"></script>
   </body>

</html>

To achieve the correct styling for both cards (shown at the top in the image), what modifications are necessary?

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-4

Answer №1

There is a mistake in the HTML code on line 83 of your JSFiddle:

<div="card-header wuformheader">

The correct syntax should be:

<div class="card-header wuformheader">

You accidentally removed the word "class".

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

The magical form component in React using TypeScript with the powerful react-final-form

My goal is to develop a 3-step form using react-final-form with TypeScript in React.js. I found inspiration from codesandbox, but I am encountering an issue with the const static Page. I am struggling to convert it to TypeScript and honestly, I don't ...

javascriptreactjstypescriptreact-final-form

Ensure the date is displayed in the format of dd-mm-yyyy when using the input type=date

Here is the code I am currently using : <input type="date" class="form-control" id="training_date" name="training_date" placeholder=" select" value="" onfocus="(this.type='date')" onfocusout="(this.type='date')" max=<?php echo ...

javascriptjqueryhtmldate

instructions on implementing Arial Black font style in LESS

Using less-1.7.0.min.js, I encountered an issue when setting Arial Black as the font. @fontFamily: Arial Black,Arial Black,Gadget,sans-serif; Upon generating the CSS, it resulted in: p, span { font-size: 14px; font-family: Arial #000000, Arial #000000, ...

csslessfont-family

What is the procedure for adjusting the padding in Material UI's datepicker?

Click here to access the codesandbox link function InlineDatePickerDemo(props) { const [selectedDate, handleDateChange] = useState(new Date()); return ( <Fragment> <MuiPickersUtilsProvider utils={DateFnsUtils}> <Keyboa ...

cssreactjsmaterial-uidatepicker

Looking for a way to utilize JavaScript to extract data from a database? I'm currently utilizing jQuery autocomplete and seeking to exclusively search for values within the database

Currently utilizing jQuery autocomplete <script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags });}); </script> Any s ...

javascriptphpjquery

Check the validity of the data by logging into another website

I've run into a bit of a problem while working on my website. Here's a brief explanation (using fake addresses), I have a website, www.website1.com, with lots of well-coded elements. You can log in to this website using www.website2.com. So whe ...

phphtmlcurl

Why does the selectedItems in the AngularJS grid keep coming back as undefined?

Is there a specific reason why the angularjs grid in my sample isn't displaying the selectedItems properly? Every time I attempt to reference the selectedItems, it returns "undefined." I have tested this in both Chrome and IE with identical outcomes. ...

javascriptangularjsng-grid

Enhancing CSS to create a more visually appealing loading spinner

I am completely new to CSS and I've been attempting to customize the CSS in the angular-loading-bar module to create a more visually appealing loading spinner. Currently, I have a square spinner that rotates in the center of the page, with a black bor ...

cssangularjsspinnerloading

Closing notifications in Bootstrap 5.1 with the help of Ajax

I am utilizing bootstrap 5.1 alerts to display custom messages after an Ajax call. I also want the ability to dismiss the alert as necessary, which can be done with a dismiss button provided by bootstrap. Below is the PHP code I am using : <div class=& ...

javascriptajaxalertbootstrap-5

React Big Calendar encountered an error: The element type provided is not valid, as it is expected to be a string for built-in

Error One: The element type is invalid: it was expecting a string (for built-in components) or a class/function (for composite components), but received undefined. This could be due to not exporting your component correctly from the file where it's d ...

javascriptreactjsreact-big-calendar

Executing Array.prototype.filter() results in an empty array being returned

I have a list of jQuery elements that I collected using the .siblings() method, and now I am trying to filter them. Here is the HTML code: <div> <div> <label for="username">Username</label> <input class="form ...

javascriptjqueryhtml

The overflow-x property causes the left side of the component to be cut off when scrolling

When the screen width is insufficient to display a component properly, I need it to be horizontally scrollable. However, when scrolling to the left after making it scrollable due to a smaller screen size, the left side of the component gets cut off and can ...

cssreactjsstyled-components

Reading JSON documents in JavaScript through multiline strings

Having a JSON document with multiline string data is causing issues for me. I have attempted multiple options, but none of them have successfully solved the problem. For example: [ { "someString" : "A rather long string of English text, an error m ...

javascriptangularjsjson

Array-based input validation

Is there a way to validate an input field against a list of strings in an array without using custom directives or patterns? For example, if the array contains town, city, and house, then typing any of those words should result in a validation failure. An ...

javascriptangularjs

Aligning the Bootstrap 5 Accordion Button in the Center and Adding Line Breaks

I have a few queries regarding the code I am implementing using Bootstrap 5. JSFiddle How can I center align the header within the button? <button class="accordion-button collapsed text-center" type="button" data-bs-toggle=" ...

htmlcsstwitter-bootstrap

Multiple buttons in a single field

I am attempting to replace a Dropdown list with a series of buttons that will streamline the choices previously displayed by the dropdown list. Specifically, we are using graphic png files for the types of buttons. We experimented with checkboxing and ra ...

phpjavascriptmysqlcsswebforms

Differences between an AngularJS function() and a factory function() when used in a

When it comes to Angular, I've come across directives being written in two different ways: .directive('example', function () { // Implementation }); .directive('example', function factory() { // Implementation }) Can you ...

javascriptangularjsangularjs-directive

Does CSS padding-top: 100% take into account the parent's width?

I'm a bit perplexed by this discovery and I can't quite comprehend the rationale behind it. The provided code snippet showcases two nested DIVs. The outer DIV has specific dimensions and a relative position set, while the inner DIV also has fixe ...

htmlcsspaddingstyling

Utilizing Typescript for parsing large JSON files

I have encountered an issue while trying to parse/process a large 25 MB JSON file using Typescript. It seems that the code I have written is taking too long (and sometimes even timing out). I am not sure why this is happening or if there is a more efficien ...

javascriptnode.jsjsontypescriptfilestream

Whenever the ajax oncomplete event is triggered, Primefaces overrides the functionality of jquery, leading to

I have implemented a plugin for fixed table columns in my Primefaces project. The plugin is somewhat functional, but I am facing some issues. primefaces v6.1 jQuery v1.7.1 It works under the following conditions; p:dataTable with <p:ajax event="page ...

javascriptjqueryajaxjsfprimefaces