Ways to incorporate a border line between a pair of icons within a bootstrap card

Incorporating a border line within the card-header is my current goal. My approach involves positioning two icons - one on the left side and the other on the right.

Illustrative example below:

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

Utilizing HMTL and CSS to achieve this effect:

.card-header .compl {
  border-right: 2px solid;
  border-top-width: 12px;
  padding-right: 10px;
}
<div class="card bg-dark" style="width: 18rem;">
    <div class="card-header">
        <div class="compl float-start mp-5">
            <ion-icon name="checkmark" class="fs-4"></ion-icon>
        </div>
        <div class="views float-end">
            <ion-icon name="eye" class=" fs-4"></ion-icon>
        </div>
    </div>
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the.</p>
        <div class="progress" style="height: 8px;">
            <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50"
                aria-valuemin="0" aria-valuemax="100">25%</div>
        </div>
    </div>
</div>
htmlcssbootstrap-4

Answer №1

Utilize custom icons and eliminate the fontawesome link solely for icon purposes. The provided scripts and links are for bootstrap, which you are already using, so disregard them. Modify the border color through CSS

.border-lr {
    border-right:2px solid black;
    border-left:3px solid yellow;
}
 <!-- Already utilizing Bootstrap 4 files -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <!-- You can use your own icons instead of FontAwesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  
  
<div class="container">
  <h2>Card Header and Footer</h2>
  <div class="card">
    <div class="card-header border-0 p-0 bg-dark d-flex">
     <div class="py-3 px-4 border-lr"><i class="fas fa-file text-light"></i></div>
  <div class="ml-auto py-3 px-4"><i class="fas fa-bars text-light"></i></div>

    </div>
    <div class="card-body">Content</div> 
    <div class="card-footer">Footer</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

Implementing function invocation upon scroll bar click

I have a Div element with a scroll bar. When a user clicks the scroll bar, I want to call a function based on that click event. How can I achieve this? On the client side, I am using jQuery and on the server side, I am using PHP. I am familiar with makin ...

phpjqueryhtml

Arrange items between multiple selection areas

I have two multi selects, mySelectNumberTest1 and mySelectNumberTest2. My goal is to select items in the first dropdown and then with a trigger event, populate those options into the second dropdown. In my search for a solution, I came across this link: G ...

javascripthtmlangularjs

The CSS transition fails to function correctly once a specific function is executed

When I hover over a div, the background color changes due to a transition effect. However, if I click on a button that triggers myFunction2 to change the background color of the div before hovering over it, the transition effect no longer works. functi ...

javascripthtmlcss

What weakness can be found in my method for encapsulating words within spans?

A piece of code I have looks like this: // separate paragraph words by spans $layer.find('p').each(function(){ var spanned = $(this).html().split(" ").map(function(w){ return '<span class="word">' + w + '</span>&ap ...

javascriptjqueryhtml

Scrollable container with jQuery draggable functionality

I am currently working on implementing a draggable list that I want to contain within a scrollable div. $( ".draggable" ).draggable(); Here is the fiddle I have created for this: http://jsfiddle.net/YvJhE/660/ However, the issue I am facing is that the ...

javascriptjqueryhtmlcssdraggable

Strange spacing issues with inline-block elements and struggling to vertically center content within them

I feel like I'm losing my mind trying to figure this out... any help would be greatly appreciated. There are three divs on the page that need to sit on a single line. They must be square with rounded corners, so setting width and height is necessary ...

htmlcss

What is the best way to animate CSS elements using jQuery to slide in from the right, left, or bottom?

When the page is scrolled on my website, I want table_area-left to move from left to right to its current position, table_area-right to move from right to left to its current position, and morph button to move from down to up. I am struggling to find the j ...

javascriptjqueryhtmlcss

PHP form headaches: issues with submitting and posting

I'm having trouble with the submit button in my PHP code. Here's what I have so far (it's for a website where users can rate things): <form method="POST> <input type="radio" name="person" value="1" /> <input type="radio" name ...

javascriptphphtmlforms

Is there a way to automatically assign a default value to radio buttons when the page is loaded?

Working with OpenERP 7, I encountered a problem with two radio buttons that should change the values of a table. After creating an event that triggers a Python function to execute an SQL query, I found that upon reloading the page, the radio buttons revert ...

javascriptjqueryhtmlxmlopenerp-7

Combining inline input fields and select buttons with Bootstrap 3

I've been exploring different ways to align form elements inline, including dropdown buttons and select buttons, but have only had success with smaller size buttons around 40px wide. My main challenge now is trying to create a search bar with an input ...

jqueryhtmlcsstwitter-bootstrap

Obtain the HTML DIV content through an ASP.NET C# code-behind event

I am trying to retrieve the content of an HTML DIV using asp.net C# code behind event. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Report.aspx.cs" Inherits="WebApplication1.Report.Report" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

c#jqueryasp.nethtml

What is the best way to pass values from PHP to an HTML tag?

My initial HTML document includes a form with radio buttons. I want my second PHP file to display a message based on the user's selection, and include some formatting such as text size and color. file.html: <html> <body> <form action ...

phphtmlforms

Is it possible for HTML to call library scripts in the sidebar?

I recently encountered an issue with a sidebar created in HTML on Spreadsheets. Everything was working perfectly until I moved the code to the main library where all the code is managed. Now, it seems that the function used by the sidebar is undefined. How ...

htmlgoogle-apps-scriptgoogle-sheetssidebar

Swap out one input for a newly generated input on the fly

Is there a way to replace a file input field with a text input field in jQuery while maintaining all properties such as id and name? Background: Currently, I have an <input type="file" name=".." id=".." /> being used for AJAX uploads. For Internet ...

javascriptjqueryhtmlinternet-explorer

Is a Selenium loop a viable option?

</head> <body> <table cellpadding="1" cellspacing="1" border="1"> <thead> <tr><td rowspan="1" colspan="3">test</td></tr> </thead><tbody> <tr> <td>click& ...

javascriptjqueryhtmlselenium-ide

Creating a unique design by displaying text in a modern, diagonally split rectangle using HTML and CSS

To creatively display the diagonal of a fictional rectangle using HTML/CSS, along with text written both above and below it. The main objective is to create a heading for a unique table design in the top left corner. This will help describe the row header ...

htmlcssbootstrap-4

Error: The specified path to the HTML file is incorrect, resulting in a 404 "

I am trying to display images or PDF documents on my webpage, but I am having trouble showing them due to path issues. In my directory, I have a Vue file, as well as PDF and image files. I want to run these files in my `vue.js` file, but I keep getting a ...

htmlvue.jspdfvue-cli

Unable to adjust the top padding of the navbar to 0 pixels

Having recently started learning HTML and CSS, I am encountering an issue with the padding on my navbar. I am unable to get it to align with the top of the site as there is a persistent space between the navbar and the top. Below is my HTML code: <!do ...

htmlcssnavbarpadding

Prevent the occurrence of a page break in between dt and dd elements

There are multiple instances of <dd> and <dt> elements in a specific order on this page. For instance: <dt> "Here is some random text" </dt> <dd> <input type="text"> <span></span> </dd> This str ...

htmlcss

The directive for Content Security Policy in Django framework

I am having trouble importing font-awesome into my application. I've tried the following code: <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> However, this is causing an err ...

cssdjangogoogle-app-engine