Unexpected behavior with HTML Bootstrap's dl-horizontal layout

Despite having the div class "dl-horizontal" within the table, the dl-horizontal fields are displaying outside the table. Here is the code I used:

<!DOCTYPE html>
<html lang="en>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-condensed table-striped">
<caption>Event <span class="badge">2</span></caption>
              <dl class="dl-horizontal">
                  <dt>field-1</dt><dd>14</dd>
                  <dt>field-2</dt><dd>13</dd>
                  <dt>field-3</dt><dd>12</dd>
              </dl>
<tr>
<th>Date</th>
<th>Field5</th>
<th>Field6</th>
<th>Field7</th>
<th>Field8</th>
<th>Field9</th>
</tr>
<tr>
<td class="text-nowrap">2018-11-13</td>
<td>val2</td>
<td>val2</td>
<td>val4</td>
<td>16</td>
<td>val5</td>
</tr>
</table>

</body>
</html>

What could I be missing? I’m attempting to have the "dl-horizontal" fields inside the EVENT and above the table values. Any assistance would be greatly appreciated. I’ve tried placing the table inside a table, but that doesn’t seem to work.

Answer №1

Here is the recommended method:

<!DOCTYPE html>
<html lang="en>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
        <table class="table table-condensed table-striped">
            <caption>Event <span class="badge">2</span></caption>
              <tr><td colspan="6">
              <dl class="dl-horizontal">
                  <dt>field-1</dt><dd>14</dd>
                  <dt>field-2</dt><dd>13</dd>
                  <dt>field-3</dt><dd>12</dd>
              </dl>
              </td></tr>
                <tr>
                    <th>Date</th>
                    <th>Field5</th>
                    <th>Field6</th>
                    <th>Field7</th>
                    <th>Field8</th>
                    <th>Field9</th>
                </tr>
                    <tr>
                        <td class="text-nowrap">2018-11-13</td>
                        <td>val2</td>
                        <td>val2</td>
                        <td>val4</td>
                        <td>16</td>
                        <td>val5</td>
                    </tr>
        </table>

</body>
</html>

Answer №2

It's important to make sure that your description list is placed within a table element to properly integrate it into the table structure. The provided code snippet incorrectly inserts the description list within the caption tag:

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

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <table class="table table-condensed table-striped">
    <caption>Event <span class="badge">2</span>
      <dl class="dl-horizontal">
        <dt>field-1</dt>
        <dd>14</dd>
        <dt>field-2</dt>
        <dd>13</dd>
        <dt>field-3</dt>
        <dd>12</dd>
      </dl>
    </caption>
    <tr>
      <th>Date</th>
      <th>Field5</th>
      <th>Field6</th>
      <th>Field7</th>
      <th>Field8</th>
      <th>Field9</th>
    </tr>
    <tr>
      <td class="text-nowrap">2018-11-13</td>
      <td>val2</td>
      <td>val2</td>
      <td>val4</td>
      <td>16</td>
      <td>val5</td>
    </tr>
  </table>
  <hr>
  <table class="table table-condensed table-striped">
    <caption>Event <span class="badge">2</span>
    </caption>
    <tr>
      <td colspan="6">
        <dl class="dl-horizontal">
          <dt>field-1</dt>
          <dd>14</dd>
          <dt>field-2</dt>
          <dd>13</dd>
          <dt>field-3</dt>
          <dd>12</dd>
        </dl>

      </td>
    </tr>
    <tr>
      <th>Date</th>
      <th>Field5</th>
      <th>Field6</th>
      <th>Field7</th>
      <th>Field8</th>
      <th>Field9</th>
    </tr>
    <tr>
      <td class="text-nowrap">2018-11-13</td>
      <td>val2</td>
      <td>val2</td>
      <td>val4</td>
      <td>16</td>
      <td>val5</td>
    </tr>
  </table>

</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

What are some techniques for highlighting the significance of specific items within an unorganized list?

My goal is to utilize semantic markup to highlight the importance or priority of each item. Let me illustrate what I mean with an example. <ul itemscope itemtype="http://schema.org/ItemList"> <h2 itemprop="name">Wish List</h2><br&g ...

jQuery UI DatePicker: without any styling, no picking dates

I'm struggling to configure a jQuery UI DatePicker. I moved the development-bundle folder contents to the directory res/jqueryui and initialized two datepickers as shown below: <script src="res/jquery-2.1.0.min.js"></script> <script sr ...

Create two floating divs that adjust their height dynamically to be equal

Situation: I have a container with two direct children, known as "left" and "right". The height of the "left" child should never exceed the height of the "right" child. However, the "right" child can extend beyond the height of the "left" child. I am stru ...

Adjust the size of the image within a designated container to decrease its proportions when there is an excess of text present

I am working on a project where I need to resize an image based on the available space within its container. When there is text in the description, the image should adjust its size accordingly without pushing the text upwards. I am using React for this pro ...

Animate a div once the parent section becomes visible while scrolling

I previously had this function working, but it seems that I have somehow messed it up in the process. My current setup includes a scroll hijack feature that navigates users to a new section or card each time they scroll. The script adds a visible class w ...

Applying CSS classes to a custom AngularJS directive: A step-by-step guide

Need to have a CSS class called tab for the nav HTML element, which will be used as a directive: <nav tab></nav> The expected interpretation is: <nav class="tab"> <a></a> <a></a> <a></a> ...

Send an AJAX request to redirect to a different page on a PHP server

After collecting data from JavaScript, my page transfers it to PHP and then MySQL. The issue arises when I want the page to redirect to different pages based on the database content. I attempted to use the header function, but it only displayed the entire ...

Why aren't CSS variables "calculating" the color?

Can anyone help me understand why I am having trouble assigning block-level CSS variables using values from SASS? Specifically, the line color: hsl(3, 75%, var(--main-color-l)); is not producing any output. My setup involves a static site generator with ...

Is it possible to adjust the height of the navbar in Bootstrap?

Currently, I am in the process of replicating the mac OS navbar and am seeking guidance on resizing the navbar height and adjusting text size to around 12px. This is my first time working with bootstrap, so any assistance would be greatly appreciated. Addi ...

Incorporating photos within the layout of a Twitter Bootstrap grid

Looking to showcase images like the ones found here: https://i.stack.imgur.com/eD4GD.jpg These images are original and come in various sizes. I want a hover effect that includes blur, fogging effects, and text placed in the middle of the picture. Check ou ...

Improving the functionality of the JavaScript key press function

I have a small javascript snippet on my website that allows me to navigate the site using the arrow keys on my keyboard. document.onkeydown = function(evt) { evt = evt || window.event; switch (evt.keyCode) { case 37: ...

BorderContainer and ContentPane dojo widgets combine to create a powerful layout system

Currently, I am in a traineeship at a company where I need to use a program developed by another trainee back in 2012. I have made some updates to the program, but encountered an issue: In the original report, the web page had a layout with a column on th ...

Problems encountered with operating the Bootstrap burger menu

After following the Bootstrap navbar documentation and implementing the code in my bs-navbar.component.html file, I encountered an issue with the hamburger menu. Despite everything being set up correctly, clicking on the hamburger icon did not display the ...

PHP and JQuery not working together to update database

Essentially, I am trying to update the status based on the unique id. Despite no errors being thrown, the status remains unchanged. index.php $(document).ready(function() { $('.seatCharts-seat').click(function(){ var id = jQuery(th ...

"Taking cues from Instagram's web/desktop design, we have created

When you view someone's instagram page on a desktop or pc, the search bar is designed to float left when clicked, allowing text to be entered for searching. If no text is entered in the search field, the search icon and placeholder return to their ori ...

Anchor positioning within Firefox Mobile (for Android)

I created a homepage with multiple sections, each linked to from the main menu: <body> <header> <!-- nav used on all pages --> <a href="#nav" class="toggle-nav"> menu <i class="fa fa-bars">< ...

Creating client side scripts for an ajax call to generate a Json object is simple once you understand the basics

Typically, when I make ajax calls, I request pure HTML. However, for various reasons, I require guidance on constructing a table (let's say of individuals and their information) when receiving a Json object. While I am capable of creating a table in J ...

Customize one header to display different banners on each page using PHP conditionals

I created my website for entertainment purposes and I decided to use different banners on each page. Currently, in my header section, random banners appear using the following code: <div style=' height:145px; background-image:url(images/banners/ba ...

The container's height is determined by the CSS top position of the last child element within the container, with a

I'm attempting to adjust the height of a container based on the position of its last child using Isotope, infinite scroll, and Packery. Below is a snippet of the code: <html> <div id="container" class="variable-sizes isotope" style="p ...

Tips on creating a line break within a text box

There is a gap between the text boxesIn the first row, I used text boxes with labels. When I use a text box with a label, the text box is attached to the text box in the first row. I tried using a break line but in mobile view, there is a gap showing be ...