Issue with dl list view in Bootstrap 4 compared to Bootstrap 3
HTML code example:
<section class="landing">
<div class="container">
<dl class="dl-horizontal">
<dt>column1</dt>
<dd>column2</dd>
</dl>
</div>
</section>
I ran into a similar issue and managed to fix it by utilizing the .row class just like @Paulie_D recommended.
This is how I resolved the problem:
<section class="landing">
<div class="container">
<dl class="row">
<dt class="col-sm-3">col1</dt>
<dd class="col-sm-9">col2</dd>
</dl>
</div>
</section>
UPDATE You can also align text to the right and left:
<section class="landing">
<div class="container">
<dl class="row">
<dt class="col-sm-3 text-right">col1</dt>
<dd class="col-sm-9 text-left">col2</dd>
</dl>
</div>
</section>
The Bootstrap V4 update removed a certain class from the framework.
Referencing the Migration documentation for Bootstrap 4
The class
.dl-horizontalhas been eliminated. The recommended approach now involves using.rowon<dl>and applying grid column classes (or mixins) to its<dt>and<dd>elements.
If you have incorporated .dl-horizontal into your content, you can easily reintroduce the Bootstrap 3 code into your own custom .css stylesheets. Referencing the original Bootstrap 3 source:
@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
clear: left;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
}
...
.dl-horizontal dd:before,
.dl-horizontal dd:after, {
display: table;
content: " ";
}
...
.dl-horizontal dd:after {
clear: both;
}
I previously had a website built with pure JS and HTML, but decided to transfer it to WordPress. Everything was functioning properly until a few days ago when two of my functions suddenly stopped working. Both functions are supposed to add an "active" clas ...
I recently embarked on my journey to learn ReactJS and I celebrated successfully writing my first code. However, when I encountered the same pattern with components, an error popped up stating _Invariant Violation: registerComponent(...): Target container ...
I'm working on customizing the styling of a Material UI Expansion Panel, specifically to apply my theme only to the main parent panel when it is expanded, and not to any nested panels within it. For instance: https://i.sstatic.net/nBhcN.png Here&ap ...
I came across this link The layout works fine when the elements are limited in the #commentWrapper, but adding more items pushes everything downwards. Copying additional <li>test</li> items clearly demonstrates the issue. I want the input box ...
I've configured an HTML Server on Windows Server 2012 with several virtual directories and files added. When attempting to download a file named firmware.dob, I'm encountering an issue where the browser displays "File not found." 404 - File or ...
My current page layout includes the following code: <div class="card"> <div class="card-block"> <h4 class="card-title text-muted">UltimateWarrior15</h4> <h6 class="card-subtitle text-muted"> Ad ...
Which browser versions have full support for using numeric values for the font-weight property? This includes Internet Explorer, Firefox, Chrome, Safari, iOS Safari, and Android Browser. While most browsers support the keyword values 'bold' and ...
As I am in the process of redesigning a website, I have encountered an issue with certain elements in the header section. Specifically, the header consists of a logo, some text, and a navigation bar. There seems to be a thick gap between the bottom of the ...
I have been experimenting with an idea and have configured the settings as follows: https://i.sstatic.net/LYteF.png and also adjusted the settings to: https://i.sstatic.net/qQXB9.png After all these changes, the outcome is displayed as: https://i.sstatic ...
My website has a full-width slider as the main background and I am using jQuery to show or hide divs depending on the clicked link. However, when some sections are longer than the initial view, my page automatically scrolls to the bottom after a click. How ...
Is there a way to create an input box that only accepts values between 20 and 40? I want to restrict single numbers within that range. How can I define the range for this specific input box? If anyone can help me achieve this, it would be greatly apprecia ...
Is there a way to retrieve image names from a database and display them in an HTML file using the following code snippet? <img src="{{ url_for('static', filename='img/{{rows.infor_image}}') }}" style="width:50%; height:60%;"> I ...
I am working on a website layout that needs to look like the image provided: The red section represents the desktop version, while the yellow section represents the mobile version. I can easily switch between the two layouts using media queries. My chall ...
I can't seem to get the "media query" function to work properly. I've tried multiple times and searched for a solution without any luck. Below is the code snippet where I'm attempting to increase the font size from 44px to 70px on small devi ...
Exploring the possibilities of Vuetify 2.0 in my current project has led me to dive into the v-stepper component, designed for displaying progress through numbered steps. In the example provided in the playground, I noticed the use of the <template> ...
In my attempts, I tried the following: $url = “http://www.howtogeek.com”; $str = file_get_contents($url); However, this code displays the entire website instead of the content from the URL specified in $url. The website I want to retrieve data from ...
Check out this LINK for the code I am using. When I click on the Parent Menu, such as Services, the sub-menu of the Services menu will open. However, when I click on another menu, the sub-menu will also open. I want the previous sub-menu to close when I c ...
While developing my web application with vue.js, I encountered an issue with radio buttons when I switched to using bootstrap style. I understand that I need to use vue-strap for proper data binding with bootstrap styled radio buttons in vue.js, but I am s ...
Seeking assistance from anyone who can lend a helping hand. I'm working on implementing a feature that allows an administrator to search for user details in a mySQL database using the email address as the search criteria. After conducting the search, ...
After successfully incorporating URL rewriting into my PHP website, I am facing an issue with displaying the links as desired. mydomain.com/komet-india/Best-Indian-Hill-Stations-1/Delhis-Hotel The elements Best-Indian-Hill-Stations,1,Delhis-Hotel in the ...