Building Icon-Filled Columns for Contact Details in Bootstrap List Groups

I have a project that closely resembles the code snippet below, with the addition of Material Design icons as outlined in .

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">      
       
      <p>Contact us and we'll get back to you as soon as possible.</p>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">
          <i class="mdi mdi-map-marker"></i>
          <div>Av. St. Andreu 116, 08392 St. Andreu de Llavaneres, Spain</div>
        </li>
        <li class="list-group-item">
          <i class="mdi mdi-phone"></i>
          +34 937927406
        </li>
        <li class="list-group-item">
          <i class="mdi mdi-email"></i>
          <a href=mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0775666b61477762626c2974686b72736e686974">[email protected]</a>><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="394b58555f79495c5c52174a56554c4d5056574a">[email protected]</a></a>
        </li>
      </ul>

When utilizing the icons, it appears like this:

https://i.sstatic.net/DFSV1.png

The icon seems to be integrated 'as part of the text', likely due to being an inline element, even when the address is placed within a div.

To change this layout so it more closely resembles a table, aligning the address text on a new line with the previous one, while still using Bootstrap 4's .list-group-flush for the 'row layout', what would be the most effective approach? Would converting the li to a flex box be the best solution?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To achieve this using only bootstrap, it is recommended to avoid setting a negative margin for the i element as it is considered bad practice. Instead, focus on removing padding from the li elements.

 /* This line may not be necessary when using material-design-icon */
.fas {
  line-height: 1.5 !important;
}
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-4 mx-auto">
      <ul class="list-group ">
        <li class="list-group-item border-left-0 border-right-0 d-flex pl-0">
          <i class="fas fa-map-marker-alt"></i>
          <span class="pl-3">Av. St. Andreu 116, 08392 St. Andreu de Llavaneres, Spain</span>
        </li>
        <li class="list-group-item border-left-0 border-right-0 d-flex pl-0">
          <i class="fas fa-phone"></i>
          <span class="pl-3">+34 937927406</span>
        </li>
        <li class="list-group-item border-left-0 border-right-0 border-bottom-0 d-flex pl-0">
          <i class="fas fa-envelope"></i>
          <a class="pl-3" href=mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87f5e6ebe1c7f7e2e2eca9f4e8ebf2f3eee8e9f4">[email protected]</a>><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7a5b6bbb197a7b2b2bcf9a4b8bba2a3beb8b9a4">[email protected]</a></a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer №2

The desired layout was achieved by utilizing a flex box for the li element and including div elements for all the text content.

<p>Feel free to reach out to us, and we'll respond promptly.</p>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">
      <i class="mdi mdi-map-marker"></i>
      <div>Av. St. Andreu 116, 08392 St. Andreu de Llavaneres, Spain</div>
    </li>
    <li class="list-group-item">
      <i class="mdi mdi-phone"></i>
      <div>+34 937927406<div>
    </li>
    <li class="list-group-item">
      <i class="mdi mdi-email"></i>
      <div><a href=mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e5c4f42486e5e4b4b45005d41425b5a5a4741405d">[email protected]</a>><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dba9bab7bd9babbebeb0f5a8b4b7aeaea1bdbcbdb0a3adacbcf3aeb7aab9bcc0bb90bfbababd97fefbbbfeebfafdbeafbf">[email protected]</a></a><div>
    </li>
  </ul>

Incorporating the following CSS rules,

li.list-group-item {
  display: flex;
}

li.list-group-item i {
  margin-left: -20px;
}

li.list-group-item div {
  margin-left: 10px;
}

transforms the contact information display as shown below:

https://i.sstatic.net/xrEN9.png

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

Tips on navigating the scroller vertically as the user interacts with a selected div by scrolling up and down

On my webpage, I have various div elements displayed. Each div has the options to move it up or down using the buttons labeled "UP" and "Down". When a user selects a div, they can then use these buttons to adjust its position. I am looking for a way to au ...

javascriptjquerycss

Manipulating the InnerHTML content of a total of 144 individual cells

I am currently developing a tile-based game using tables. Each td cell contains the following code: <td> <div id="image" style="display:none; display: fixed; right: 5; top:2;"><img src="http://thumb7.shutterstock.com/display_pic_with_logo ...

javascripthtmlhtml-table

Using Angular's ngIf directive to dynamically add the selected attribute to an option based on a specific string

I need to dynamically set the selected attribute for an option in a select drop-down list. Here is an example of what I want to achieve: <select name="gcodeProfile"> <option value="HT Translucent F WF 500 um.gcode.profile& ...

htmlangularangular-ng-if

How to enable seeking functionality for mp3 files with PHP

I have implemented the following PHP script: video tags are unable to extract metadata from it. Any insights on where I might be going wrong and how to rectify this situation? Your guidance would be greatly appreciated. Thank you.</p> ...

phphtml

Identifying HTML attributes for Web Scraping Techniques

I'm currently working on developing a web scraper and facing challenges in identifying element attributes. My approach involves scanning through the code like moving a "scanning head" from left to right, searching for specific character strings such ...

htmlc++webweb-scrapingattributes

Adjusting the color of a cell based on its value

Currently, I am in the process of converting a CSV file to an HTML table by utilizing a tool available at . However, I am facing a challenge in modifying the background color of cells based on their values. I would greatly appreciate any help or guidance w ...

javascripthtmljquerycss

What could be the reason for the nav icon not displaying?

<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Boot ...

htmlcssbootstrap-5

Activate Bootstrap dropdown with an external button click

I am currently working with Bootstrap 5 dropdowns and I have a specific requirement. I want the button that triggers the dropdown to be located outside of its parent element (under A). Is there a way to achieve this using Jquery or JS? <div class=&quo ...

javascriptjquerytwitter-bootstrapbootstrap-5

Extract the raw text content from nested elements

Working with highlight.js to include a custom CSS code, however, this library automatically adds span tags around the desired text For example: <pre> <code class="language-css hljs" contenteditable="true" id="css-code&quo ...

javascripthtmlcss

Exploring Webpack: Combining CSS-modules with external CSS imports - A comprehensive guide!

In my React application using css-modules, I encountered an issue when trying to import CSS files from external libraries. Due to the inability to globally wrap them in a :global block, webpack interprets them as styles intended for objects only. Is there ...

cssreactjswebpack

The functionality of the "#Next" and "#Prev" features in the Tiny carousel are currently not functioning properly within the MVC project

Looking to implement a simple content carousel using jQuery 2.1.3 in my project. Previously used a non-responsive jQuery content carousel and switched to find a responsive option:Tiny Carousel Added Tiny Carousel's .js and .css files to Bundles.confi ...

jquerycssasp.net-mvctwitter-bootstrapcarousel

pressing a button unrelated to the 'close' button still triggers the close event

I have a notification bar that features a button in the center that links to another website. There is also a 'close' button on the far right. However, whenever I click the center button, it also triggers the close button. I tried moving the #cl ...

javascripthtmlcss

Modifying SVG gradients with JavaScript

My goal is to modify the stop color of a gradient displayed in an SVG element. I've been trying to adjust the stop-color attribute, but so far, my attempts have not been successful: <svg><defs> <linearGradient gradientTransform="rotat ...

javascripthtmlsvggradient

Maintain consistent alignment of the backgrounds for each term-description pair within a definition list resembling a table

I am trying to style a definition list in HTML to resemble a table using th and td elements in two separate columns, while also having alternating row backgrounds. I have implemented the following CSS for this purpose: dl { font-family: Verdana, Genev ...

htmlcsscss-tables

Keep bootstrap content aligned to the left

I am working on creating a webpage using bulma/bootstrap and my goal is to have some text positioned on the left side of the screen. I want this text to be displayed in the red area and to stay fixed in place when I scroll down, similar to a side panel. ...

htmlcssbulma

Text input field for username not visible on screen

https://i.stack.imgur.com/2UUQl.png After designing the login page for my current project, I seem to have accidentally hidden the username text input. Can anyone explain why this is happening and provide guidance on how to make it visible again? ...

htmlcss

Issue with the background opacity not being properly applied at the bottom of the div

One challenge I am facing is creating a clickable image with text at the bottom and a semi-transparent background behind it, which is a common design element on many websites. I have everything working except for a small portion of the image showing below ...

htmlcssopacity

Is there a way to implement an event listener for a customized select element within a table on a webpage?

I have a table that contains columns populated from a database. I also have a custom select dropdown in one of the columns, along with an update button. I want to create an event listener for the button that captures the user's selection from the cust ...

javascriptbootstrap-4

Menu Selector on the Right Side

I am currently working on a drop down menu and trying to align it to the right using HTML and CSS. Below is an example that I have been referencing: http://codepen.io/anon/pen/RNLmvq Attached here is a screenshot of how the menu appears without the text ...

csshtmldrop-down-menu

Which web browsers are compatible with the input attribute "multiple"?

I am currently incorporating this particular plugin, and its file input does not support multiple file selection. To address this issue, I have added the 'multiple' attribute. However, I am curious if there are any browsers or other platforms (su ...

htmlcssinput