Display a large feather icon on the left side with the title and description positioned on the right side

I'm trying to achieve a flex-style UI that resembles this design:

https://i.sstatic.net/2mFrm.png

So far, I've managed to split the UI using col-5 col-2 col-5 classes from Bootstrap and utilize flex to create the col-5 UI sections (left and right). Here's the code snippet:

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-5">
                        <div class="d-flex align-items-start">
                            <div class="avatar me-75">
                                <i data-feather="upload" class=avatar-icon></i>
                            </div>
                            <div>
                                <p class="mb-0">Lorem ipsum</p>
                                <p>lorem ipsum dolor sit amet lorem ipsum</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-2">
                        <div class="d-flex" style="height: 50px;">
                            <div class="vr"></div>
                        </div>
                    </div>
                    <div class="col-5">
                        <div class="d-flex align-items-start">
                            <div class="avatar me-75">
                                <i data-feather="user-plus" class=avatar-icon></i>
                            </div>
                            <div>
                                <p class="mb-0">Lorem ipsum</p>
                                <p>lorem ipsum dolor sit amet lorem ipsum</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

After implementing this code, the output doesn't match my expectations. Could there be a missing Bootstrap class or another approach that could help achieve the desired result as shown in the mockup?

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

htmlcssbootstrap-5

Answer №1

In order to achieve the desired result, I suggest removing the specified column width for the vertical border and adding it separately in the CSS file. Additionally, utilize the justify-content-center Bootstrap class within the div element that has the d-flex class. Hopefully, this aligns with what you are aiming to accomplish.

.col-6::after {
  content: "";
  position: absolute;
  border-right: 2px dotted #000;
  height: 75px;
  top: 10px;
  left: 50%;
  display: block;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3c1ccccd7d0d7d1c2d3e3968d918d90">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-body">
        <div class="row">
          <div class="col-6">
            <div class="d-flex justify-content-center">
              <div class="avatar me-75">
                <i data-feather="upload" class=avatar-icon></i>
              </div>
              <div>
                <p class="mb-0">Lorem ipsum</p>
                <p>lorem ipsum dolor sit amet lorem ipsum</p>
              </div>
            </div>
          </div>

          <div class="col-6">
            <div class="d-flex justify-content-center">
              <div class="avatar me-75">
                <i data-feather="user-plus" class=avatar-icon></i>
              </div>
              <div>
                <p class="mb-0">Lorem ipsum</p>
                <p>lorem ipsum dolor sit amet lorem ipsum</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

If you prefer an alternative approach without relying on Bootsrap or Flex but utilizing the CSS Grid Layout, I have also crafted a separate code snippet for your consideration. :)

.card-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.card-section .card {
  display: grid;
  grid-template-columns: 100px 1fr;
  justify-self: center;
  align-items: center;
}

.card-section .card:first-child::after {
  content: "";
  position: absolute;
  border-right: 2px dotted #000;
  height: 100px;
  top: 10px;
  left: 50%;
  display: block;
}

.card-section .card .icon-holder {
  background: #000;
  width: 75px;
  height: 75px;
  border-radius: 15px;
}
<div class="card-section">
  <div class="card">
    <div class="icon-holder">
      <i class="icon"></i>
    </div>

    <div class="info">
      <h2>
        Title
      </h2>
      <p>
        Description
      </p>
    </div>
  </div>

  <div class="card">
    <div class="icon-holder">
      <i class="icon"></i>
    </div>

    <div class="info">
      <h2>
        Title
      </h2>
      <p>
        Description
      </p>
    </div>
  </div>
</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

CSS that relies on the presence of a specific class

I'm a CSS novice and I have encountered a scenario where I need to apply a CSS class only when another class is not present. <div class="border-solid p-2 bg-white mt-1 h-fit" [ngClass]="SOME_CONDITION ? 'tile-con ...

cssangulartailwind-css

Create a custom jQuery plugin that enables users to toggle checkboxes with the click of a button

Having trouble with my jQuery button code that is supposed to toggle associated checkboxes but ends up freezing the browser. I am in need of the following functionalities: 1) Clicking on "select all" should select all checkboxes. 2) Clicking on "select all ...

javascriptjqueryhtml

Is there a way to get an iframe to mimic the behavior of other media elements within a horizontal scrolling container?

Take a look at this code snippet: $(document).ready(function() { $('.scrollable-area').on('wheel', function(e) { var scrollLeft = $(this).scrollLeft(); var width = $(this).get(0).scrollWidth - $(this).width(); var delta ...

javascriptjquerycssiframeiframe-resizer

Eliminate the use of "!important" in bootstrap CSS

I am trying to customize the .text-primary class with a color of my choice. To do this, I added the following code in my override file: @include text-emphasis-variant(".text-primary",$brand-primary, true); The text-emphasis-variant is a mixin from Bootst ...

htmltwitter-bootstrapbootstrap-4scss-mixins

Unable to trigger Bootstrap 5 Modal using ASP.NET Code-behind

I have searched through numerous discussions on this topic, but I have not yet come across a solution that works. I am working on an ASP.NET web application project and I want to utilize a Bootstrap 5 modal to show messages when users need to make correcti ...

asp.netbootstrap-modalbootstrap-5

Guiding user to their destination after signing in

Having trouble showing different headers based on user login status? Users can log in using login.php, but you're struggling to display header.php when a user is not logged in or logged in. You want the page to show profile form content when they are ...

phphtmlmysqldatabasesession

What is the best way to reposition the caret within an <input type="number"> element?

How can I make the caret move when an input is clicked? The code I found works with text, but not with number. Also, is there a way to pass the length without specifying a value (e.g. 55) in the parameters? HTML <input type="number" name="cost" value= ...

javascriptjqueryhtml

Encountering some difficulties while setting up my development tool (specifically webpack)

I have embarked on a journey to learn modern JavaScript with the help of Webpack and Babel. As a beginner in this field, my instructor is guiding me through the principles of modern JavaScript by building an app called Forkify - a recipe application. While ...

javascripthtmlnode.jsnpmwebpack

The contact form is encroaching on the footer

The issue arises when the contact form overlaps with the footer. When testing the code on Codepen, the styles are correctly linked and working for everything except the contact form. I have attempted adjusting the padding, bottom position, etc., but nothin ...

htmlcssbootstrap-4

Having trouble getting buttons to wrap onto a new line instead of spilling over the container

Struggling with getting a JSFiddle to work properly with React and other dependencies, I've decided to share the Github repo link to demonstrate the issue: https://github.com/ishraqiyun77/button-issues/ The main problem arises when a group of button ...

cssreactjstwitter-bootstrapbuttonbootstrap-4

Trying to incorporate a PHP echo statement into the innerHTML of a button is ineffective

I have a piece of jQuery code that is not functioning as expected: $("#erase").click(function(){ $("#erase").attr("disabled", "disabled"); // Prevent double-clicking $(this).html("Erasing..."); $.post("erase.php", {target: $("#targ ...

javascriptjqueryhtmlajax

Animate in Angular using transform without requiring absolute positioning after the animation is completed

Attempting to incorporate some fancy animations into my project, but running into layout issues when using position: absolute for the animation with transform. export function SlideLeft() { return trigger('slideLeft', [ state('void&a ...

cssangularanimationtypescriptangular2-animation

What is the best way to capture the input value upon pressing the "Enter" key?

My first question here is about implementing the addtodo(todo) code. After trying it out successfully, I wanted to make it work when typing and pressing enter. However, despite attempting some other methods, I couldn't get it to work. I didn't re ...

javascripthtmlcss

How can I prevent a browser from allowing users to select an image tag?

I'm dealing with an issue on my webpage where I have an image that is inadvertently picking up mouse clicks, causing the browser to perform drag and drop actions or highlight the image when clicked. I really need to use the mousedown event for somethi ...

javascripthtmldom

Achieved anchoring an object to the top of the page while scrolling

Recently, I've been working on a piece of code to keep my div fixed at the top of the page while scrolling. However, it doesn't seem to be functioning as intended. Would anyone be able to point out where I might have gone wrong? The element in ...

javascriptjqueryhtmlcss

Ensure that every closing curly brace is followed by a new line character

I'm utilizing a piece of code I stumbled upon online to condense my css files and it's working well, but there's a slight regex problem that's causing me some difficulty. $css = preg_replace('/([\\w#\\.\&b ...

phpcssregexnewlinecurly-braces

What are the steps to effectively utilize <ul> for showcasing scrolling content?

I stumbled upon and found it to be a great inspiration for my project. I tried replicating the layout of the listed items on the site: .wrap { display: block; list-style: none; position: relative; padding: 0; margin: 0; border: ...

javascripthtmlcss

Is your idTabs design in need of some sprucing up

Just stumbled upon idTabs and trying to implement a basic one on my server. I've taken the code from the 'Usual' page, included the plugin file and jQuery, but all I'm seeing is... - Tab 1 - Tab 2 - Tab 3 This is tab 1. Seems like it& ...

javascripthtmlcsstabs

Creating a dynamic webpage with flexible design and interconnected containers using the Bootstrap framework

Creating a responsive layout with nested divs using Bootstrap Check out my HTML code below: <div class="container-fluid" style="height: 350px;"> <div class="row-fluid clearfix" style="height: 100%"> <div class="col-md-9 column" ...

htmlcsstwitter-bootstrapresponsive-design

Tips for effective page management

After creating a navbar in my project, I've come to the realization that it requires a component for each page and subpage. This seems redundant especially when dealing with multiple navigation options like shown in this image. Is it necessary to crea ...

htmlangularnavigationnavbar