Stop using the bootstrap dl-horizontal class for responsive design

I utilized Bootstrap to design a list and used the dl-horizontal class in the following way:

<dl class="dl-horizontal">
  <dt>1</dt>  <dd>deta1</dd>
  <dt>1</dt>  <dd>deta1</dd>
  <dt>1</dt>  <dd>deta1</dd>
  <dt>1</dt>  <dd>deta1</dd>
  <dt>1</dt>  <dd>deta1</dd>
  <dt>1</dt>  <dd>deta1</dd>
  <dt>1</dt>  <dd>deta1</dd>
  <dt>1</dt>  <dd>deta1</dd>
  <dt>1</dt>  <dd>deta1</dd>
</dl>

Initially, the list displays correctly on a large desktop. However, upon resizing the window and testing for responsive design, the dd elements are shown below the corresponding <dt> elements. The requirement is to display the dd elements next to the dt elements in all window sizes. How can this be rectified?

View DEMO

htmlcsstwitter-bootstrapresponsive-design

Answer №1

According to @GusRuss89, the solution lies within a media query. Rather than simply copying the CSS code, it is suggested to alter the @dl-horizontal-breakpoint variable.

 @media (min-width: @dl-horizontal-breakpoint) {
  dt {
    float: left;
    width: (@dl-horizontal-offset - 20);
    clear: left;
    text-align: right;
    .text-overflow();
  }
  dd {
    margin-left: @dl-horizontal-offset;
  }
}

By changing @dl-horizontal-offset to 400px, the term and definition of the list are now displayed on the same row.

Answer №2

The CSS for .dl-horizontal can be found within a media query. It is suggested to extract this code and incorporate it into your main CSS file. This should fulfill all your requirements.

To enhance the responsiveness, consider adjusting the width of dt and the left margin of dd for better alignment on smaller devices.

.dl-horizontal dt {
  float: left;
  width: 160px;
  overflow: hidden;
  clear: left;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-horizontal dd {
  margin-left: 180px;
}

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

Match precisely with a specific constituent of the adjacent cell

Is there a way to accomplish this layout using tables? I'm open to suggestions, such as utilizing flexbox, if it's not possible with tables. In a table with two columns, the left column contains text while the right column holds an image and add ...

htmlcsshtml-tablealignment

Leveraging the power of ExpressJs to incorporate a dynamic Navbar onto

ExpressJS and EJS are my chosen technologies for creating Views. When it comes to the navigation bar, I want to add a class="active" to the links that represent the current page. However, if I use partials in my views, how can I achieve this? Here is a q ...

cssnode.jstwitter-bootstrapexpressejs

Exploring the functionality of multiple index pages in angularjs

I am trying to access the localhost:3000/admin which is located in my views. The index.html and admin.html are two separate base files, one for users and the other for the admin dashboard respectively. Here is a snippet from my app.routes.js file: angul ...

javascripthtmlangularjsangular-routing

Creating a dynamic div and populating it with data from various elements in separate xhtml files: a step-by-step guide

I am looking to dynamically add a div under the div tag with id "includedContent" in the code below. Additionally, I would like to modify the load method to accept an array of ids instead of a hardcoded Id(123) and display the data in the dynamically creat ...

javascriptjqueryhtml

Stop users from being able to copy text on their smartphones' internet browsers

I am currently working on creating a competitive typing speed challenge using JavaScript. Participants are required to type all the words they see from a div into a textarea. In order to prevent cheating, such as copying the words directly from the div, o ...

javascriptphpjqueryhtmlcss

HTML: Align DIV contents next to each other without any overlap

Below are three boxes displayed. Boxes 1 and 3 appear fine, but in box 2 the text content is overlapping. The issue lies with the <div> having the class .vertical_center.grade_info which has a specific margin-left of 100px, causing the overlap. I ne ...

htmlcssuser-interface

How to adjust the background picture opacity in HTML

Is it possible to adjust the transparency of a background image in HTML? I came across one solution that involved adding a box on top of the background picture and changing the opacity of the box, which in turn changed the opacity of the background pictur ...

htmlbackground-imageopacity

`The height attribute of the textarea element is not being accurately adjusted`

When I tried to match the width(178px) and height(178px) of my table to the width and height of a text area upon clicking a button, I encountered an issue. While setting the width works perfectly fine, the height is being set to only 17px. It seems like ...

javascripthtmlcss

Clearing Up CSS Height Definitions

Based on my observations from other posts, it seems that to establish the height of an element in percentages or pixels, etc., the parent element's height also needs to be explicitly defined. This implies that the height settings must be specified all ...

htmlcssheight

Styling the <div> element to create a unique rotation and tilt aesthetic

Would anyone be able to guide me on how to recreate the tilted style of the header section shown in the image using HTML and CSS? https://i.sstatic.net/mhJWA.png body { margin: 0px; background-color: #FFEF4C; } #header { background-color: #FF35 ...

htmlcss

Issue with Internet Explorer 7 causing table to display with added height

Currently investigating why there is additional space being added by IE. The only fixed data is the width of the image (171 px). Using Jquery, I checked the height of the div in Firefox, Chrome, and Opera which came out to 164px, but in IE 7 it's 172 ...

htmlcssinternet-exploreralignment

Is there a way to conceal the horizontal divider in the login form of the ionic HTML mobile user interface?

While designing this login form on the HTML ionic mobile UI, everything looks good except for one thing - I want to hide the horizontal line that appears between the "Forgot Password" label and the LOGIN button. Is there a way to do this? Login.html: < ...

androidhtmlangularionic-frameworkmobile

Tips for integrating elements within React Components to create a Container-like structure

I am looking to create a component similar to the following: class MyContainer extends React.Component { render(){ return <div width="1000">{xxx }</div> } } and it should be used in this way: <MyContainer><xxx>&l ...

htmlreactjsjsx

I'm encountering an issue trying to launch bigbluebutton HTML5. I attempted to initiate it using "npm start" after installing it with "meteor npm install," but unfortunately, it failed to

I've been attempting to launch the Development environment for bigblubutton-html5, but unfortunately, I encountered an error message after executing this command: npm start Please refer to the tutorial I used: Here's the error message that was ...

htmlnpmmeteorbigbluebutton

Email confirmation based on checkbox status in PHP contact form

My goal is to make my file called send_form_email.php work by sending an email with a way to indicate which checkboxes are checked. Right now, it sends the form successfully, but doesn't include any information about the checked items. The following ...

phphtml

How can I achieve a full-width stepper in Bootstrap?

.row { background: #f8f9fa; margin-top: 20px; } .col { border: solid 1px #6c757d; padding: 10px; } <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://useloope ...

htmlcsstwitter-bootstrap

Creating a full width and height slider with a header menu that is responsive to all device screen sizes

Looking to create a full-width slider with a header that adjusts for all screen sizes, especially larger devices. I've been searching online but haven't found a satisfactory solution yet. If anyone has any ideas or tips on how to achieve this, pl ...

jqueryhtmlcssslider

How can I convert the stylesheet link from fonts.google.com into a CSS class and include it in my file.css as an internal style instead of an external one?

Looking to incorporate a font from fonts.google.com? Here's how you can do it: <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300 ...

windows-10fontshtmlcss

What is the best way to choose content that has been clicked on?

How do I display only clicked content? Currently, I have a system where clicking a button shows the data in the nav tag. The code is written in views.py. class TopView(TemplateView): model = Data template_name = 'index.html' def get ...

pythonjqueryhtmldjango

Displaying directory contents with JavaScript XHR

When I inquired whether javascript has the ability to list files on the server, the general response was that "javascript cannot access the server filesystem since it is a client-side scripting language". However, I believed this answer was only partially ...

javascripthtmlxmlxmlhttprequestlighttpd