I'm using Bootstrap 3.3.7 and I have a dl list configured as horizontal. I would like to visualize a full length row inside a <dl> tag.
<dl class="dl-horizontal">
<dt>Label 1</dt>
<dd>Text 1</dd>
<dt>how to display a full length text?</dt>
<dd></dd>
<dt>Label 2</dt>
<dd>Text 2</dd>
</dl>
I would like to obtain something like this:
Try this
Check Demo here
HTML:
<dl class="dl-horizontal">
<dt>Label 1</dt>
<dd>Text 1</dd>
<dt class="fullWidth"> 26 Lakeshore View, Sentosa Cove, Singapore 26 Lakeshore View, Sentosa Cove.</dt>
<dd></dd>
<dt>Label 2</dt>
<dd>Text 2</dd>
</dl>
CSS:
.fullWidth + dd {
margin-left: 0;
width: unset;
}
.dl-horizontal dt.fullWidth {
width: 100%;
text-overflow: unset;
white-space: initial;
text-align: left;
}
This fiddle link may solve your problem.
Codes are as followed.
HTML
<div class="container">
<dl class="dl-horizontal">
<div class="row">
<dt class="col-xs-6">Label 1</dt>
<dd class="col-xs-6">Text 1</dd>
</div>
<div class="row">
<dd class="col-md-12">I guess this is what you are looking. This may help you. in bootstrap each row is devided into 12 columns. For more information you can check bootstrap grid system. </dd>
</div>
<div class="row">
<dt class="col-xs-6">Label 2</dt>
<dd class="col-xs-6">Text 2</dd>
</div>
<div class="row">
<dd class="col-md-12">Defination of lable2 Text2. This contains the defination.</dd>
</div>
</dl>
</div>
You need to add bootstrap.js and bootstrap.css files.
Related
I have been building a web application using Bootstrap 3. Within that, I used panels to group user elements - displaying data, simple edit forms etc.
I would use a dl with the label as a dt and the value as the dd.
Similarly, I would use forms with the labels inline with the fields
<div class="panel-body">
<dl class="dl-horizontal">
<dt>Name</dt>
<dd>Value</dd>
</dl>
</div>
I could use dl-horizontal just fine within the panel.
Now, however, with Bootstrap 4 panels have become cards, and the dl-horizontal class does not seem to have an effect.
<div class="card-body">
<div class="card-text">
<dl class="dl-horizontal">
<dt>Name</dt>
<dd>Value</dd>
</dl>
</div>
</div>
Update
Removed references to forms. I had initially had issues with form-horizontal as well, Bootstrap4 does horizontal forms differently
Bootstrap 4 no longer supports dl-horizontal. The recommended alternative is to use .row and .col*.
<div class="card-body">
<div class="card-text">
<dl class="row">
<dt class="col-4">Name</dt>
<dd class="col-8">Value</dd>
</dl>
</div>
</div>
worked for me
To get fully responsive behavior, use:
<div class="card-body">
<div class="card-text">
<dl class="row">
<dt class="col-sm-3 text-md-right">Name</dt>
<dd class="col-sm-9">Value</dd>
</dl>
</div>
</div>
Because in Bootstrap 3 the dl-horizontal class only applied to sm+ screens, and it aligned the <dt> to the right.
Use a combination of list-inline and list-inline-item:
<div class="card-body">
<div class="card-text">
<dl class="list-inline">
<dt class="list-inline-item">Name</dt>
<dd class="list-inline-item">Value</dd>
</dl>
</div>
</div>
I'm having an issue when using Bootstrap's dl with the dl-horizontal class. In the xs, md and lg viewports the dl's descriptions are displayed properly. However, in the sm viewport, the dl's content leaves its parent's boundary.
Here's the xs viewport.
Then the larger ones...
And the problem appears with the md viewport.
Here's the code related to that div:
<div class="col-sm-3">
<div class="panel panel-primary">
<div class="panel-heading text-center">
Stats
</div>
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active">Basic</li>
<li>Advanced</li>
</ul>
<dl class="dl-horizontal text-muted">
<dt>
Nodes:
</dt>
<dd>
7
</dd>
<dt>
Bandwidth:
</dt>
<dd>
3 kbps
</dd>
<dt>
Average hops:
</dt>
<dd>
3
</dd>
<dt>
Latency:
</dt>
<dd>
100 ms
</dd>
</dl>
</div>
</div>
</div>
</div>
You can add this property to erase the text-align: center property of dt :
.dl-horizontal dt { text-align: left; }
See it here
You need to add dt element's style width: auto;
Create a custom style for dt and dd that resets default behaviour of style as others suggested.
.dl-horizontal > dt.left {
text-align: left;
margin-right: 10px;
width: auto;
}
.dl-horizontal > dd.left {
margin-left:0;
}
I am working inside a panel and am not able to left align or remove the margins for a horizontal list in Bootstrap.
i.e.
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
<strong>testing</strong>
</h3>
</div>
<div class="panel-body">
<dl class="dl-horizontal">
<dt>term 1</dt>
<dd>foo</dd>
<dt>term 2</dt>
<dd>bar</dd>
</dl>
</div>
</div>
</div>
https://jsfiddle.net/srzyL86g/
Solved here . https://jsfiddle.net/adityap708/9k0qg8jn/
.container dt,.container dd {
width:auto;
margin-left:auto;
display:inline-block;
}
Add this to your css. Boostrap is giving dt and dd width and margin you need to overwrite it.
I have this html:
<div id="gallery-1" class="gallery galleryid-39 gallery-columns-3 gallery-size-thumbnail gallery1">
<script type="text/javascript"></script>
<dl class="gallery-item"></dl>
<dl class="gallery-item"></dl>
<dl class="gallery-item"></dl>
<br style="clear: both"></br>
<dl class="gallery-item"></dl>
<dl class="gallery-item"></dl>
<br style="clear: both"></br>
</div>
and this css:
.gallery dl:first-child {
display: none;
}
and it`s not working, I do not know why
dl:first-child won't match the <dl> element since it is not the first child of its parent. (Actually the first child of .gallery is a <script> element)
In order to target the first <dl> element, you could use :first-of-type pseudo class instead:
.gallery > dl:first-of-type {
display: none;
}
script is the first child of div. so it cant get selected. if you want to access first dl then use dl:first-of-type
Here is fiddle link
<div id="gallery-1" class="gallery galleryid-39 gallery-columns-3 gallery-size-thumbnail gallery1">
<script type="text/javascript"></script>
<dl class="gallery-item"></dl>
<dl class="gallery-item"></dl>
<dl class="gallery-item"></dl>
<br style="clear: both"></br>
<dl class="gallery-item"></dl>
<dl class="gallery-item"></dl>
<br style="clear: both"></br>
</div>
.gallery > dl:first-of-type {
display:none
}
I need help figuring out the breakpoint in my zurb foundation code. What the code does it adds both tabs and accordion. Tabs for big screens and accordion view for phones and tablets. However I have yet to figure out how I change the breakpoint(meaning the size where it hides the tab and show the accordion instead).
This is the foundation css file ( to large for stackoverflow )
http://pastebin.com/eSgHmSgK
This is the HTML
<section class="center-menu">
<div class="center-menu-container">
<div class="hide-for-small">
<dl class="tabs" data-tab="">
<dd class="active" id="#panel1dd" >IT</dd>
<dd id="#panel2dd">Telefoni</dd>
<dd id="#panel3dd">IT-Säkerhet</dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel1">
<p>This is the first panel of the basic tab example. This is the first
panel of the basic tab example.</p>
</div>
<div class="content" id="panel2">
<p>This is the second panel of the basic tab example. This is the
second panel of the basic tab example.</p>
</div>
<div class="content" id="panel3">
<p>This is the third panel of the basic tab example. This is the third
panel of the basic tab example.</p>
</div>
</div>
</div>
<dl class="accordion show-for-small" data-accordion>
<ul class="small-block-grid-1 medium-block-grid-3">
<li>
<dd>
Accordion 1
<div id="panel1c" class="content">
Panel 1. Lorem ipsum dolor
</div>
</dd>
<dd>
Accordion 2
<div id="panel2c" class="content">
Panel 2. Lorem ipsum dolor
</div>
</dd>
<dd>
Accordion 3
<div id="panel3c" class="content">
Panel 3. Lorem ipsum dolor
</div>
</dd>
</li>
</dd>
</li>
</ul>
</dl>
</div>
</section>
Thanks in advanced!
In Foundation 5 the tabs are displayed and the accordions are hidden when when #media only screen and (min-width: 40.063em) is reached in the browser; the .hide-for-small displays the tabs and the .show-for-small rule hides the accordions.
/* Medium Displays: 641px and up */
#media only screen and (min-width: 40.063em) {
.hide-for-small,
... {
display: inherit !important;
}
.show-for-small,
... {
display: none !important;
}
}
Otherwise the .show-for-small rule displays the accordion:
.show-for-small {
display: inherit !important;
}