What's the best way to transform a vertical list into a horizontal one?

Is it possible to transform my vertical dl list into a horizontal one with just a single list? I am using Bootstrap 4 and wondering if this can be achieved using flexbox.

HTML: 

<footer class="footer">
    <div class="footer-top">
        <div class="container">
            <div class="row text-center">
                <dl class="footer-top-list">
                    <dt class="footer-top-termin col-md-4">Location</dt>
                    <dd class="col-md-4">3481 Melrose Place</dd>
                    <dd class="col-md-4">Beverly Hills, CA 90210</dd>
                    <dt class="footer-top-termin col-md-4">Share with love</dt>
                    <dd class="col-md-4">
                        <ul class="list-inline">
                            <li class="list-inline-item">
                                <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                            </li>
                            <li class="list-inline-item">
                                <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                            </li>
                            <li class="list-inline-item">
                                <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
                            </li>
                        </ul>
                    </dd>
                    <dt class="footer-top-termin col-md-4">About</dt>
                    <dd class="col-md-4">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus
                        auctor fringilla.
                    </dd>
                </dl>
            </div>
        </div>
    </div>
        <div class="footer-bottom">
        </div>
</footer>

I currently have all the dt and dd elements stacked vertically, but I want them to appear as shown in this image: https://i.sstatic.net/HpBgJ.png

Any suggestions on how to achieve this layout?

htmlcsshtml-listsbootstrap-4

Answer №1

By encasing your sets of dts and dds within div tags, you can utilize the bootstrap classes to structure those collections into columns.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
  <footer class="footer">
    <div class="footer-top">
      <div class="container">
        <div class="text-center">
          <dl class="row footer-top-list">

            <div class="col-md-4">
              <dt class="footer-top-termin col-md-4">Location</dt>
              <dd class="col-md-4">3481 Melrose Place</dd>
              <dd class="col-md-4">Beverly Hills, CA 90210</dd>
            </div>

            <div class="col-md-4">
              <dt class="footer-top-termin col-md-4">Share with love</dt>
              <dd class="col-md-4">
                <ul class="list-inline">
                  <li class="list-inline-item">
                    <a href="#">
                      <i class="fa fa-facebook" aria-hidden="true"></i>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a href="#">
                      <i class="fa fa-twitter" aria-hidden="true"></i>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a href="#">
                      <i class="fa fa-linkedin" aria-hidden="true"></i>
                    </a>
                  </li>
                </ul>
              </dd>
            </div>

            <div class="col-md-4">
              <dt class="footer-top-termin col-md-4">About</dt>
              <dd class="col-md-4">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla.
              </dd>
            </div>

          </dl>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
    </div>
  </footer>

Note: vue snippet in full page to trigger the md breakpoint.

Answer №2

Have you thought about using the div element with the class col-md-4? Take a look at this example:

<footer class="footer">
    <div class="footer-top">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-4">
                  <strong>Location</strong><br>
                  3481 Melrose Place<br>
                  Beverly Hills, CA 90210
                </div>
                <div class="col-md-4">
                  <strong>Share with love</strong><br>
                </div>
                <div class="col-md-4">
                  <strong>About</strong><br>
                  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus
              auctor fringilla.
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
    </div>
</footer>

Check out the Fiddle here!

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

Conditional rendering of a component in ReactJS while maintaining the "empty" space

Is there a way to conditionally render a component without affecting the layout of other components? I'm trying to avoid unwanted shifts caused by this div https://i.sstatic.net/g1eUd.gif Do you have any suggestions? Here is a snippet of my code: ...

javascriptcssreactjsmaterial-ui

Pressing enter to submit a form when the submit button is not visible is functional in Firefox, but has no effect in Chrome

There is a form with various input fields and a hidden submit button (hidden using style="display:none"). Interestingly, in Firefox, pressing the return key while an input field is focused automatically submits the form. However, in Chrome, hitting retur ...

javascripthtmlcssformsgoogle-chrome

Locate elements with Jquery after displaying HTML content

I am encountering an issue with the code snippet below: tblBody = $('#tbody'); tblBody.html(rowsStr.join('')); var lines = tblBody.find("tr"); The array rowsStr contains strings that create tr and td tags. Sometimes, when I use tblB ...

javascriptjqueryhtml

Can the value in a JavaScript object be updated dynamically when a button is clicked?

In my JavaScript code, there is an object named annualPlan. Whenever a user submits the HTML form for a specific month, I aim to update the value in the object for that particular month accordingly. For instance, if someone submits August 21 and 200, I w ...

javascripthtmlcss

Froala text area is unexpectedly visible when I attempt to cover it with a partially see-through mask

The website I'm currently developing features a semi-transparent overlay that dims the screen with a light-colored message displayed on top. This overlay and message are shown whenever there is a background process running. Everything was running smoo ...

javascriptcssangularjsfroala

Extract data from a URL using PHP and JavaScript technologies

Upon receiving a json data from a URL, specifically through celery's flower plugin, the following sample is obtained: { "celery@s1": { "scheduled": [], "stats": { "clock": "2535550", "pid": 26002, "broker": { "tran ...

javascriptphpjqueryhtmljson

Is there a CSS3-compatible CSS parser available in C/C++?

Are there any C/C++ CSS parsers that currently support CSS3? I have come across a few, but none of them seem to offer full CSS3 compatibility. ...

c++cparsingcss

Displaying a success dialog after closing a Bootstrap modal

I have set up a bootstrap modal containing a form. Upon submitting the form, the form content is hidden and a bootstrap alert message is displayed. However, upon clicking the bootstrap popup, the same alert message is shown in the popup instead of displayi ...

jqueryhtmlcsstwitter-bootstrap

Tips for Ensuring Element Width is Maintained Despite Border

My webpage layout is using the fantastic Twitter Bootstrap framework and I am trying to add a stylish CSS3 Box Shadow effect to a column. However, I have encountered an issue where the box shadow's 1px border is causing my second column to wrap onto ...

htmlcsstwitter-bootstrap

Tips for aligning a Twitter button and a regular button side by side on a horizontal

I have two buttons - one for Twitter and the other a normal submit button. I am struggling to align them horizontally on the same line. After experimenting with various combinations of margin settings for ".buttonLine", ".twitter-share-button", and "#newQ ...

javascripthtmlcsstwitter-bootstrap

How can we create a stylish HTML table using CSS display:table and SASS in a sophisticated manner?

Is there a more stylish approach to styling this HTML table using CSS display: table with Sass? Instead of using traditional table elements, I have created a table layout using display: table CSS styles applied to div elements: <div style="display: ...

javascripthtmlcsssassmustache

Click on a link to open it in the current tab with customized headers

In my Angular project, I am attempting to open a link by clicking a button that redirects to the specified URL using the following code: window.open(MY_LINK, "_self"); However, in this scenario, I also need to include an access token in the header when t ...

javascripthtmlangularajaxtypescript

The function isset is not properly functioning when used with a submit button

Currently, I am in the process of constructing a login page using PHP. My intention is for the code to verify the username and password entered only after the login button has been clicked. However, currently, the code seems to execute even if the login ...

phphtmlpostform-submitisset

Incorporate h:outputText into your JavaScript code segment

After populating some information into a h:outputText, I am now looking to trigger a JavaScript function upon clicking a button that will retrieve the text from the outputText. The structure of the code is as follows: <p:tabView id="tabView"> & ...

javascripthtmlajaxjsf

Updating the CSS style of an inner DIV using JavaScript

Can you provide guidance on how to modify the background color using JavaScript for the different styles listed below? i) Internal Style sheet and/or ii) External Style sheet I am currently working with the card deck slide show available at https://githu ...

javascriptcssbackground-colordivision

Tips on choosing vml elements using jquery or vanilla javascript

I am trying to select a VML element using jQuery without relying on 'id' or 'class', but my attempts have been unsuccessful so far. <v:oval id="vmlElement" style='width:100pt;height:75pt' fillcolor="red"> </v:oval> ...

javascriptjqueryhtmldomvml

Stylish CSS dropdown menu with borders and a subtle shift

I am struggling to create a dropdown menu as shown in this image: Solution for CSS dropdown menu. Unfortunately, my current code is not producing the desired result: Here is my incorrect solution This is the code I am using: .parent-menu li { ...

htmlcssmenunavbardropdown

No response from jQuery's $.getJSON() function

I'm currently experimenting with jQuery by using a script that I wrote. As a beginner in learning jQuery, I am trying to read data from a .json file and display it in a div. function jQuerytest() { $.getJSON( "books/testbook/pageIndex.json", func ...

javascriptjqueryhtmljson

I prefer to avoid generating the document structure while parsing with JSOUP

Utilizing the Jsoup API to parse a section of HTML using the Jsoup.parse() method. However, during parsing, it includes the document structure in the HTML content. For Instance: <p><a href="some link">some link data</a> Some paragraph c ...

javascripthtmlparsingjakarta-eejsoup

Navigating through drop-down menus using jQuery

I need help with a JavaScript script that can calculate the total number of points based on selected checkboxes and dropdown values. Currently, my script is able to iterate through checkboxes and assign 1 or 2 points based on their classes, but I'm st ...

javascriptjqueryhtmljquery-selectbox