Utilizing Bootstrap to create a list inside a <dd> element

Hello Universe!

I'm on a quest to discover an elegant solution for presenting multiple lines of information within a 

tag. Right now, I have the following setup:</p>

<pre><code><dl class="row">
    <dt class="col-2">
        Role Name
    </dt>
    <dd class="col-10">
        Test Role
    </dd>

    <!-- IsActive -->
    <dt class="col-2">
        Active
    </dt>
    <dd class="col-10">
        <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
    </dd>

    <!-- Groups -->
    <dt class="col-2">
        Groups
    </dt>
    <dd class="col-10">
        <ul class="list-group list-group-flush">
            <li class="list-group-item">testadgroup1</li>
            <li class="list-group-item">testadgroup2</li>
            <li class="list-group-item">testadgroup3</li>
        </ul>
    </dd>
</dl>

Initially, I thought of utilizing the list-group class together with list-group-flush, along with some adjustments to the default CSS like so:

.list-group-item {
    padding-left: .625rem;
    padding-right: .625rem;
    padding-top: .375rem;
    padding-bottom: .375rem;
}

.list-group-item:first-of-type {
    padding-top: 0rem;
}

This method works fine, but I sense there might be a more efficient way to achieve similar results that I haven't explored yet.

Additional details (if relevant):

  • I'm working with Bootstrap 4 and ASP.NET MVC
  • I'm open to using external libraries as long as they integrate well with Bootstrap 4

.list-group-item {
        padding-left: .625rem;
        padding-right: .625rem;
        padding-top: .375rem;
        padding-bottom: .375rem;
    }

    .list-group-item:first-of-type {
        padding-top: 0rem;
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<dt class="col-2">
            Role Name
        </dt>
        <dd class="col-10">
            Test Role
        </dd>

        <!-- IsActive -->
        <dt class="col-2">
            Active
        </dt>
        <dd class="col-10">
            <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
        </dd>

        <!-- Groups -->
        <dt class="col-2">
            Groups
        </dt>
        <dd class="col-10">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">testadgroup1</li>
                <li class="list-group-item">testadgroup2</li>
                <li class="list-group-item">testadgroup3</li>
            </ul>
        </dd>
    </dl>

htmltwitter-bootstrapcssbootstrap-4

Answer №1

Special thanks to Marshall Tigerus for his helpful input on my initial post.

Thanks to his suggestion, I was able to achieve a sleek look without any unnecessary complexity.

Here is my revised code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<dl class="row">
    <!-- RoleName -->
    <dt class="col-2">
        Role Name
    </dt>
    <dd class="col-10">
        Test Role
    </dd>

    <!-- IsActive -->
    <dt class="col-2">
        Active
    </dt>
    <dd class="col-10">
        <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
    </dd>

    <!-- Groups -->
    <dt class="col-2">
        Groups
    </dt>
    <dd class="col-10">
        <div class="row">
            <div class="col-12">testadgroup1</div>
            <div class="col-12">testadgroup2</div>
            <div class="col-12">testadgroup3</div>
        </div>
    </dd>
</dl>

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

Leveraging the Power of jsPDF in Your Google Apps Scripts

Is it feasible to integrate jsPDF into a Google Apps Script project? I am attempting to create documents using templated HTML, but certain CSS styles like background-color do not translate to PDF when using the getAs() function. Given the limitations of ...

javascriptcssgoogle-apps-scriptpdf-generationjspdf

Step-by-step guide to dynamically updating array indexes using jQuery and HTML input fields

const list = []; function updateIndex(index) { list.splice(index, 1); console.log(list); var html = ""; html += "<ul id = 'del'>"; for (var i = 0; i < list.length; i++) { html += "<li>" + list[i] + " <button oncl ...

htmljquery

Inline-block list with consistent spacing between each item

I have a list of five items that are displayed inline. The challenge is to align the text in the first item with the left side and the text in the last item with the right side, while maintaining equal spacing between all items relative to both edges. Aft ...

javascriptjqueryhtmlcss

Clear function of signature pad not working inside Bootstrap modal dialogue box

Currently, I'm working on implementing a signature pad dialogue box using Bootstrap modal. When the user clicks on the "Complete Activity" button, a dialog box should pop up with options for yes or no. If the user selects yes, another dialog box shoul ...

htmlangulartypescriptbootstrap-modal

Using bootstrap-vue sticky columns without specifying a column variant is easier than you think

Let's cut to the chase with an example I created using bootstrap-vue's documentation to help clarify the issue: <template> <div> <div class="mb-2"> <b-form-checkbox v-model="stickyHeader" inline>Sticky header& ...

cssvue.jsbootstrap-4bootstrap-vue

Tips on customizing the CSS responsiveness of your Bootstrap carousel

I have recently installed a Bootstrap theme on my Wordpress site and I am trying to make some CSS adjustments. One issue I am facing is with the carousel. Currently, when I resize the website or view it on a mobile device... The carousel maintains a lar ...

htmlcsswordpresstwitter-bootstrapbootstrap-4

What is the correct way to implement math.sqrt in my calculation?

My goal is to calculate the square root of total2, but for some reason it's not displaying in the selected box. Here are the javascript codes. I will provide comments for the HTML codes. function myFunction() { var q1 = document.getElementById("q ...

javascripthtmlvariablesmathaddition

I am having trouble setting a component to show up as inline-block in Angular2

Within my Angular2 application, I am facing an issue with displaying multiple instances of a child component - app-video-container - in a grid layout using inline-block. The parent component generates these instances using an ngFor loop but they appear sta ...

cssangular

How to Implement Button Disable Feature in jQuery When No Checkboxes Are Selected

I need help troubleshooting an issue with a disabled button when selecting checkboxes. The multicheck functionality works fine, but if I select all items and then deselect one of them, the button disables again. Can someone assist me with this problem? Be ...

javascriptjqueryhtml

Create JavaScript variable from either HTML or database sources

Hello, I am trying to implement a counter that retrieves its value from a JavaScript file, but I would like to customize it. Below is the JavaScript code: function updateCounter(count) { var divisor = 100; var speed = Math.ceil(count / divisor); ...

c#javascriptasp.nethtml

Using JSON as HTML data within Flexbox for interactive hyperlink rollovers

Utilizing JSON to extract HTML data with unique html tags within Flex has presented a challenge. The limited support for HTML in Flex has made it difficult to implement a basic font color rollover effect on links. While Flex only allows for a few HTML tags ...

htmlcssapache-flexjsonrollovers

Can you explain the distinction between onKeyUp and onKeyUpCapture in React (as well as onKeyDown/Capture)?

I was unable to find any existing documentation or questions related to my query, which surprised me. Upon inspecting the React index.d.ts file, I came across the following: // Keyboard Events onKeyDown?: KeyboardEventHandler<T>; onKeyDownCapture?: ...

htmlreactjsdom-events

The jQuery navigation consistently unveils the initial option every time

My navigation element looks like this: <ul> <li name='first_item'> <ul> <li>item 1</li> <ul> <li>item 1.1</li> <li ...

javascriptjqueryhtmlmouseeventmouseenter

Ensure the webpage is set to have a minimum width of 1024 pixels

Is it possible to make a webpage that utilizes bootstrap, Angular 2x, and Scss stop being responsive once the screen width reaches 1024px? I would like the layout to stay fixed at this size and enable horizontal scrolling for users who resize their browser ...

htmlcsssass

Ways to incorporate vertical alignment while adjusting the size of a <div> block

Seeking advice on how to vertically align <div> blocks (green blocks in my example) when changing block size. What adjustments are needed in my example for the vertical alignment (middle) of side blocks to be maintained when resizing the browser win ...

htmlcssalignmentvertical-alignment

Trouble with Bootstrap 4 Carousel functionality

Having encountered an issue with the carousel module on Bootstrap 4, I've spent a significant amount of time troubleshooting with no success. In the hopes of finding a solution, I'm reaching out here for assistance! (Despite checking other relat ...

javascriptjqueryhtmltwitter-bootstrap

Issue encountered when attempting to use an HTML document as a blueprint for generating additional HTML documents with the

I am currently working on an exercise that involves creating four different files: index.html, home.html, about.html, and contact.html. The objective is to utilize jQuery's .load function to load the other three HTML files within index.html while stil ...

htmljquery

Running code upon the activation of list elements

Here is the HTML code snippet that I am working with: <ul class="tabs"> <li id="taba" class="active"><a href="#a">A</a></li> <li><a id="tabb" href="#b">B</a></li> <li><a id="tabc" hre ...

jquerytwitter-bootstrap

Can you modify a WordPress/WooCommerce title written in uppercase to display in proper capitalization?

My current project is centered around WordPress and utilizes WooCommerce as its e-commerce platform. I recently migrated products from an old site where the product titles were written in uppercase. At the moment, my HTML code for the product titles looks ...

phpcsssqlwordpresswoocommerce

What is the best way to transfer PHP data to an HTML tag?

I have a growing HTML file and a separate PHP document. The PHP document is responsible for fetching subscriber numbers and viewing statistics from my YouTube channel, and I need this information to be displayed in the HTML code. Here is the PHP script: ...

phphtml