Arrange multiple lines in a straight line

I am currently utilizing bootstrap 5 for my project.

<div class="col-lg-3 col-md-6">
    <h5 class="text-light mb-4">Stay in contact</h5>
    <p><i class="fa fa-map-marker-alt me-3"></i>619 Otaroad-north-Sidrac, New York, New York 291290 </p>
    <p><i class="fa fa-phone-alt me-3"></i><a href="tel:213-622-1212">213-622-1212</a></p>
    <p><i class="fa fa-envelope me-3"></i><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e7eae7c5e7eae7abf0f6e4">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="177578755775787539626476">[email protected]</a></a></p>
</div>

Is there a way to format text on multiple lines so that it aligns correctly?

How can I ensure that "New York" is aligned with "619" in the address?

I attempted replacing the p tag with span and adding the style: word-wrap: break-word;

However, this did not achieve the desired outcome.

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

cssbootstrap-5

Answer №1

To achieve this layout, you can use the CSS property display: flex; on the first p element. This will display the icon and text as two separate flex items. It is recommended to assign a class to the p element for better styling control:

p:first-of-type {
  display: flex;
}
<div class="col-lg-3 col-md-6" style="width: 200px;">
    <h5 class="text-light mb-4">Stay in contact</h5>
    <p><i class="fa fa-map-marker-alt me-3">X&nbsp;&nbsp;&nbsp;</i>619 Otaroad-north-Sidrac, New York, New York 291290 </p>
    <p><i class="fa fa-phone-alt me-3">X&nbsp;&nbsp;&nbsp;</i><a href="tel:213-622-1212">213-622-1212</a></p>
    <p><i class="fa fa-envelope me-3">X&nbsp;&nbsp;&nbsp;</i><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad8d5d8fad8d5d894cfc9db">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c3e333e1c3e333e72292f3d">[email protected]</a></a></p>
</div>

Answer №2

Check out this more streamlined approach. You don't have to include &nbsp;

p {
  display: grid;
  grid-template-columns: 20px auto;
  gap: 1rem;
}
<div class="col-lg-3 col-md-6" style="width: 200px;">
    <h5 class="text-light mb-4">Stay in touch</h5>
    <p><i class="fa fa-map-marker-alt me-3">XX</i>619 Otaroad-north-Sidrac, New York, New York 291290 </p>
    <p><i class="fa fa-phone-alt me-3">X</i><a href="tel:213-622-1212">213-622-1212</a></p>
    <p><i class="fa fa-envelope me-3">X</i><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f0d000d2f0d000d411a1c0e">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c0cdc0e2c0cdc08cd7d1c3">[email protected]</a></a></p>
</div>

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

Struggling with creating a fluid/elastic/liquid layout in HTML. Can someone please assist me with this

I've been attempting to incorporate a fluid layout on my friend's website, but unfortunately, it doesn't seem to be functioning properly. The page is quite simple, with just a slider on it. Could you please take a look at it and let me know ...

htmlcss

Hover over the text to reveal its content

I am currently in the process of developing a website that features interactive images with text appearing when hovered over. This concept is inspired by the functionality on the nowthisnews.com site. Despite my efforts, I have been unable to get this fea ...

htmlcss

How can I maintain an element in the open position in jQuery slideUp/slideDown function if it has a certain

I am working on a menu that includes both parent and child elements. When you hover over a parent item with children, the submenu smoothly slides down, and when you hover off, it slides back up. However, I am facing a challenge. How can I modify this jque ...

jquerycssjquery-ui-slider

A guide on restricting overflow in React Spring Parallax 'pages'

Currently, I have integrated React Spring Parallax () into my project found at this link: https://codesandbox.io/s/parallax-sticky-scroll-2zd58?file=/src/App.js Upon clicking the button to navigate to the next section, it is noticeable that the image over ...

cssreactjsparallaxreact-spring

The design breaks occur exclusively in the Android default browser

I am experiencing issues with the design of a nested div element when viewed in the default Android browser. Unfortunately, I don't have access to tools that would allow me to identify the cause of this problem. However, the design functions correctly ...

jqueryhtmlcsscross-browser

What is the correct method for inserting the following line into an XSLT document without causing it to malfunction: > data-masonry='{"percentPosition": true }' ?

Looking to implement the Bootstrap Masonry layout showcased at https://getbootstrap.com/docs/5.0/examples/masonry/ within SobiPro using Joomla 4 Cassopedia Template. Requirement for a div structure like this - <div class="row" data-masonry=&a ...

xsltbootstrap-5masonrysobipro

Make the child element's width equal to the parent element's height using only CSS

Is it possible to make the width of a child-div match the parent-div's height using only CSS? Check out this JsFiddle Demo Typically, I would use jQuery like this: $("#child-div").width($("#child-div").parent().height()); But I really need to ac ...

jqueryhtmlcss

Adjusting the background element of a fullpage.js layout during resizing and customization

Is there a way to make the background image responsive on a fullpage.js page, specifically for mobile and tablet devices? How can I ensure that a specific part of the image stays at the center of the page when resizing? For instance, in the provided imag ...

javascripthtmlcssbackgroundfullpage.js

Mastering the art of creating an authentic carbon fiber CSS background

Authentic carbon fiber consists of a series of interconnected grey fibers that resemble woven sheets in grey color. Does anyone have knowledge on how to replicate this pattern using CSS? The examples created by Lea Verou do not accurately depict true carb ...

csslinear-gradients

Tips for creating a fixed element with ScrollTrigger and GSAP

How can I prevent the right div from jumping on top of the left div when using a scroll trigger to make the left div's position fixed? gsap.registerPlugin(ScrollTrigger); const tlfour = gsap.timeline({ scrollTrigger: { trigger: ".ma ...

javascripthtmlcssgsapscrolltrigger

Arranging the form in an organized and visually pleasing manner

Does anyone have any ideas on how to design this form in a clean and organized way? I've experimented with lists, tables, and divs but can't determine which works best. Contact Information: <div class="formsubmit"><label>Name:& ...

htmlcssforms

What is the best way to extract a number from a string in JavaScript?

There are instances in HTML files where a <p> tag displays the price of a product, such as ""1,200,000 Dollar"". When a user adds this product to their cart, I want the webpage to show the total price in the cart. In JavaScript, I aim to e ...

javascripthtmlcss

Creating a button that seamlessly adapts to all browsers

I am encountering an issue with the positioning of a chat button on my website. Despite my efforts, the button does not remain in the desired location across different browsers and screen resolutions. The browser zoom also causes inconsistencies in the but ...

cssbrowsercross-browserzooming

The external embedded CSS seems to be missing from index.html after the Docker build process

My Vue/Webpack application includes an embedded CSS link in my index.html file that references an external source. Here is an example snippet: <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" con ...

htmlcssdockernpmwebpack

Creating a div overlay triggered by the addition of a child tag

Using the Paypal zoid feature, I have a button that opens an iframe in the parent div when clicked. However, the iframe causes the other contents of the website to shift around, making it look messy. I'm wondering if there is a way to make the parent ...

javascriptcsspaypaldom-events

Lock the "tr" element dynamically at the bottom of the table

Is there a way to keep a specific tr at the bottom of a table using VUE or Js? I have a Vue component that dynamically adds table rows based on an API call. However, I need a specific tr to always be at the bottom, and whenever a new tr is added, it shoul ...

javascripthtmljquerycssvue.js

Eliminate the horizontal scrollbar generated by a certain div

I'm working on the following HTML structure: <div id="container"> <div id="content"></div> </div> The container div is set at a width of 1050px and has a shadow background that repeats vertically. The content div is 950px ...

htmlcssscrollbar

Tips for toggling the visibility of a <div> element using PHP code inside

I'm having trouble with a dropdown list that is supposed to show/hide some divs containing PHP files. However, when I try to toggle the visibility of the divs using the dropdown list, it doesn't seem to work as expected. Can anyone help me figure ...

javascriptphpjqueryhtmlcss

Design a blurred glass effect background with a circular spotlight focusing on a specific section of an HTML webpage

I've been attempting to achieve a frosted glass effect on a background, with a circular section unblurred. Unfortunately, my current implementation in the sandbox editor is not working as expected - the area of the circle remains blurred. If you&apos ...

css

Align navigation bar using Angular Material

Trying to center my navbar has been a struggle for me. I attempted using 'layout-align='space-between center' but it's not taking up 100% width and is acting more like an inline element. I've been following the documentation close ...

cssangularjsflexboxangular-material