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;
}
Related
I have a li item and then a div which follows after it. Inside this div its like a hr tag, just a line with contents to separate. This is the desktop version.
When viewing in mobile version, I want to bring this li item below the div.
I tried with margin-top, the li item moves, but the div also move along with it, to further down.
How to achieve this ?
<li class="ser" s><a href="javascript:void(0);" title="" alt="" ><img src="/con.svg">
</li>
<div class="hbar row row-no-gutters">
<div class="col-sm-4 visible-tablet visible-desktop"> Content1
</div>
<div class="col-sm-4 visible-tablet visible-desktop"> Content2
</div>
<div class="col-sm-4 visible-tablet visible-desktop"> Content3
</div>
</div>
You could try reversing the order of the outer container with flexbox.
<ul class="container">
<li>list item</li>
<div>some content</div>
</ul>
.container{
display: flex;
flex-direction: column-reverse;
}
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 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.
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 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;
}