Twitter Boostrap grid system with description list (<dl>)

Question

Looking for three columns as follows.

<div class="row">
    <div class="col-md-4">Subject: <span id="ticket-subject">Subject</span></div>
    <div class="col-md-4">Topic: <span id="ticket-topic">Topic</span></div>
    <div class="col-md-4">Status: <span id="ticket-status">Status</span></div>
</div>

How can I produce the same effect but by using a description list and using the Twitter Bootstrap library?

<dl class="row">
    <dt class="col-md-4">Subject:</dt><dd id="ticket-subject">Subject</dd>
    <dt class="col-md-4">Topic:</dt><dd id="ticket-topic">Topic</dd>
    <dt class="col-md-4">Status:</dt><dd id="ticket-status">Status</dd>
</dl>

Answer 1

Check this one:

 .row { display: flex; } .label-topic { width: auto; font-weight: normal; padding-right: 5px; } dd { margin-right: 25%; }

 <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdnjs.cloudflare.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> <dl class="row"> <dt class="col-md-4 label-topic">Subject:</dt><dd id="ticket-subject">Subject</dd> <dt class="col-md-4 label-topic">Topic:</dt><dd id="ticket-topic">Topic</dd> <dt class="col-md-4 label-topic">Status:</dt><dd id="ticket-status">Status</dd> </dl> </body> </html>

Twitter Boostrap grid system with description list (<dl>)

Question

1 answers

solution1
0 2018-11-21 13:52:00

Twitter Boostrap grid system with description list (<dl>)

Question

1 answers

solution1 0 2018-11-21 13:52:00

solution1
0 2018-11-21 13:52:00