Which way to implement this picture in HTML CSS code and bootstrap

by

You can do that using CSS grids. Here is an example:

.wrapper {
  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="wrapper">
  <p class="icon"><i class="fa fa-phone fa-lg i-circle"></i></p>
  <p class="label-font">n° d'appel</p>
  <p class="val-font">04444444</p>
</div>

More Related Contents:

  1. My Website is Mirror-flipped on iPhone Devices
  2. Trying to work on responsiveness of login form
  3. Bootstrap row with columns of different height
  4. Bootstrap 4: Multilevel Dropdown Inside Navigation
  5. Animate/Shrink NavBar on scroll using Bootstrap
  6. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  7. How to center nav-items in Bootstrap? [duplicate]
  8. Create a responsive navbar sidebar “drawer” in Bootstrap?
  9. Bootstrap 4 row fill remaining height
  10. Bootstrap 4 Cards of same height in columns
  11. How to make Bootstrap 4 cards the same height in card-columns?
  12. Bootstrap – align button to the bottom of card
  13. Bootstrap 4 – Sticky footer – Dynamic footer height
  14. Bootstrap 4 – Responsive cards in card-columns
  15. Align the form to the center in Bootstrap 4 [duplicate]
  16. How to center cards in bootstrap 4?
  17. Add spacing between vertically stacked columns in Bootstrap 4
  18. Bootstrap navbar link color won’t change
  19. Empty vertical space between columns in Bootstrap 4
  20. bootstrap 3 to bootstrap 4 cols no longer horizontally aligned [duplicate]
  21. Bootstrap navbar: nothing is displayed on smaller devices
  22. Why are some of my CSS rules not working?
  23. Why aren’t my bootstrap 4 columns the same height?
  24. CSS float-right not working in Bootstrap 4 Navbar [duplicate]
  25. How to make Bootstrap cards the same height in card-columns?
  26. Position absolute but relative to parent
  27. css ‘pointer-events’ property alternative for IE
  28. Add padding at the beginning and end of each line of text
  29. How to change font-family of drop down’s list item?
  30. Make plus symbol in CSS

Leave a Comment