What is the best approach to incorporate this image into HTML, CSS, and Bootstrap code?

I am in need of assistance to develop a code similar to the image provided above.

If someone could provide me with an implementation utilizing HTML and CSS.

I attempted to use bootstrap div and col as well as native HTML with table, tr, and td but found it to be challenging.

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<table>
  <tr>
    <td>
      <i class="fa fa-phone fa-lg i-circle"></i>
    </td>
  </tr>
  <tr>
    <td>
      <p class="label-font">phone number</p> <br />
      <p class="val-font">04444444</p>
    </td>
  </tr>
</table>

htmlcssbootstrap-4

Answer №1

To achieve this layout, you can utilize CSS grids. Here is an illustration:

.container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  grid-gap: 10px;
}

p {
  padding: 0;
  margin: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
}

.icon {
  grid-row: span 2;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 50px;
  border: 1px solid lightgrey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<div class="container">
  <p class="icon"><i class="fa fa-phone fa-lg i-circle"></i></p>
  <p class="label-font">Phone Number</p>
  <p class="val-font">04444444</p>
</div>

Answer №2

To easily create layouts, consider using flexbox instead of tables. Tables should be reserved for displaying data in a clear and organized way.

For more information on how to use flexbox, check out this guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

It's important to note that in Font Awesome version 5, the correct class to use is fas and not fa. Refer to the Font Awesome documentation for more details: https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

/*DEMO*/body{padding:3rem}
.wrap{display:flex;align-items:center}
.fa-phone{margin-right:1rem}
<div class="wrap">
  <i class="fas fa-lg fa-phone"></i>
  <div>
      <div>n° d'appel</div>
      <div>04444444</div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>

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

Chrome browser rendering image as PHP/CSS/HTML web navigation bar

I've hit a snag while working on my small website. The navigation of the website is functioning properly in Internet Explorer, but in Google Chrome, it's not clickable. Initially, I thought the issue might be related to the background image of ...

phphtmlcss

What could be causing the bottom of a vertical scroll bar to be cropped in Internet Explorer 11?

I am experiencing an unusual problem in IE11 where the content at the bottom of my page is being cut off along with the scroll bar that should allow for viewing that content. I have managed to resolve this issue in Chrome, Firefox, and Edge but I cannot se ...

htmlcssflexboxinternet-explorer-11

What is the best way to insert two rows directly in the middle of two Bootstrap columns?

I need to align two rows in a straight line. Similar to the example shown in the image below: https://i.sstatic.net/EwRat.png After that, I want to split the Bootstrap into two columns, one with col-md-8 and the other with col-md-4. In the col-md-8 col ...

htmlcsstwitter-bootstrap

Building a Compact Dropdown Menu in Bootstrap

I am looking to implement a compact Bootstrap dropdown feature, but I am unsure of how to do it. Take a look at this image for reference. base.html: <a class="text-light" data-bs-toggle="dropdown" aria-expanded="false&qu ...

htmlcssdrop-down-menudropdownbootstrap-5

Struggles encountered when trying to fetch text using a custom xpath or css selector in firebug

Struggling to extract a specific text snippet from a webpage using Selenium. The code I'm dealing with on the page is as follows: <div id="BVRRRatingOverall_Review_Display" class="BVRRRating BVRRRatingNormal BVRRRatingOverall"> <div class="B ...

htmlxpathseleniumcss-selectors

Creating a layout with Bootstrap 4 cards split into two rows

I need to change my layout from 3 columns to 2 columns. I know I can achieve this using CSS like the code snippet below, but I'm curious if there's a built-in Bootstrap method for this: .card-columns { -webkit-column-count: 2; -moz-column-co ...

csstwitter-bootstrapbootstrap-4

Chart: Observing the Discrepancy in the Initial X-Axis Points

I'm working on incorporating multiple charts onto one page, with each chart centered and stacked one after the other. I've set a fixed width for the graph canvas. The challenge arises from the varying ranges of tick values - one chart may have a ...

javascriptcssflot

"An issue has been identified where the ui.bootstrap.accordion component is not functioning correctly

I struggled to implement the accordion feature from https://angular-ui.github.io/bootstrap/#!#accordion. After countless attempts with bootstrap version 4.0.0, I switched to 3.0.0 and finally achieved the desired results. Version 4 displayed only a clickab ...

angularjstwitter-bootstrapangular-ui-bootstrapbootstrap-4angular-ui

Is there a way to preserve the HTML template code as it is when saving it in a cell?

Looking to store an HTML email template in a Google Sheet cell, but running into formatting issues. The code resembles this example: See sample Email HTML code The problem arises when pasting the complete email template HTML code in a cell. Upon copying ...

htmlgoogle-sheetsgoogle-sheets-formula

Initially, the 'display none' CSS command may not take effect the first time it is used

I am currently working on a slideshow application using jquery.transit. My goal is to hide a photo after its display animation by setting the properties of display, transform, and translate to 'none' value. Although the slideshow application work ...

javascriptjquerycss

Incorporating an HTML image into a div or table using jQuery

I am a beginner in using JQuery within Visual Studio 2013. My question is how to insert an img tag into a table or div using JQuery? For example, I have a div and I would like to generate an image dynamically using JQuery. Or, I have a dynamically create ...

javascriptjqueryhtmlcss

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

Drawer in Material-UI has whitespace remaining at the corners due to its rounded edges

While using the Material UI drawer, I attempted to round the corners using CSS: style={{ borderRadius: "25px", backgroundColor: "red", overflow: "hidden", padding: "300px" }} Although it somewhat works, the corners appear white instea ...

javascriptcssreactjstypescriptmaterial-ui

I am unable to utilize the backspace function within a text box generated by JavaScript

I have created a dynamic form using JavaScript that includes buttons and one text input field. However, the issue is that to delete the text entered in the input field, one must highlight the text and then type over it instead of being able to simply use t ...

javascripthtmlformsinput

Explore our product gallery with just a simple hover

I am looking to design a product list page with a mouseover gallery similar to the one showcased on [this page][1]. I attempted to use a vertical carousel like the one illustrated in this Fiddle, but unfortunately, it does not function like Zalando and jc ...

javascriptjqueryhtmlcss

The fixed-top navigation bar in Bootstrap obscures the links within the #content

As a student studying software development, I am currently working on a web development project for my class. Utilizing Bootstrap, I have implemented a navbar-fixed-top and structured the body as a table-striped table with each row containing a <a href= ...

javascripthtmlcsstwitter-bootstrap-3

Issue with PHP and HTML Character Interactions

My variable looks like this: $name=' 18 " LCD TV '; When attempting to use it in an HTML input, the characters after the " do not display. Any suggestions on how to fix this issue? ...

phphtml

Is a persistent left border / divider only on the even-numbered items in the list?

I have a layout of list items arranged in 2 columns, separated by a bottom margin after every 'row' of 2 items. While it's simple to add a left border to every even list item... I am curious if it's achievable to extend the border so ...

htmlcssbordermultiple-columns

What is the best way to display data in a textview on an android app with a custom color like #f00000?

I am encountering an issue with data that is received from a webservice. The data contains HTML tags that are not supported by Android, such as: > <span Style="color:#ff0000;">the Lord Is The Creator <span>; As a result, "The Lord Is the C ...

androidhtmlwebview

What is the best way to eliminate excessive spacing between two containers in mobile view?

I have created a layout with a single container and a row split into two columns. The left column contains a title and the right column contains a card, both centered. I am facing an issue when viewing it on mobile, there is excessive spacing between the t ...

javascripthtmlcss