My button is not moving centre of the page? - html

I have one page in that page left side bottom of the page one floating button is there i want to move that button left side centre of the page with fixed position ,i tried with marging-top but it's not working, can you please help me to achieve this thing
#cbtn{
position:fixed;
margin-top: -200px;
width:60px;
height:60px;
bottom:20px;
/* right:40px; */
background-color:#5468ff;
color:white;
border-radius:50px;
text-align:center;
box-shadow: 2px 2px 3px #999;
}
<table id="cbtn" >
<tr onclick="window.open('tel:7204968541');">
<td>
<a href="#" class="btn-xl" onclick="window.open('tel:7204968541');"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16">
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
</svg></a>
</td>
</tr>
</table>

I used position:fixed;, top:50%; and transform: translateY(-50%);
I simplified the html by using a link tag.
I centered the icon with display:flex;, align-items:center; justify-content:center;
body {
height: 2000px;
}
.call {
width: 60px;
height: 60px;
background-color: #5468ff;
color: white;
border-radius: 50px;
text-align: center;
box-shadow: 2px 2px 3px #999;
position: fixed;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
}
<a href="tel:7204968541" class="call">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16"><path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/></svg>
</a>

I am not sure if i understood you correctly, but here is an example on how you can center the button on the page.
You can give it a top: 50%. This will plage the button's left side on the center of the page.
Then we add transform: translateY(-50%) to move it left by 50% of its width, which makes it perfectly centered on the page
#cbtn {
position: fixed;
width: 60px;
height: 60px;
top: 50%;
transform: translateY(-50%);
background-color: #5468ff;
color: white;
border-radius: 50px;
text-align: center;
box-shadow: 2px 2px 3px #999;
}
<table id="cbtn">
<tr onclick="window.open('tel:7204968541');">
<td>
<a href="#" class="btn-xl" onclick="window.open('tel:7204968541');"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16">
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
</svg></a>
</td>
</tr>
</table>
Your markup seems a bit strange.
maybe you could simple have a .... This will call the number when people click on it. no need to add extra markup and onclick events...

I think you have to use flex for this what you can do is...
apply flex CSS to telephone's parent and write:
display:flex;
align-items:center;
justify-content:center;
this will work to make element center
you can refer this link it will help you: https://www.geeksforgeeks.org/how-to-center-a-div-using-flexbox-property-of-css/

Related

Content centered in local host but changes in gh-pages

I have a very simple container that has two svg's in them for buttons. In local host these are centered perfectly and responsive as expected. When I host my project on gh-pages my content with the two svg's in them shift the to the left for some reason. Any ideas?
Code for buttons:
return (
<Container className="button_container">
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
fill="currentColor"
className="bi bi-arrow-left-square-fill previousBtn"
viewBox="0 0 16 16"
onClick={previousPage}
>
<path d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1z" />
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
fill="currentColor"
className="bi bi-arrow-right-square-fill nextBtn"
viewBox="0 0 16 16"
onClick={nextPage}
>
<path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v12zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1z" />
</svg>
</Container>
);
}
css
.button_container {
display: flex;
justify-content: space-around;
margin: 3em;
}
.previousBtn,
.nextBtn {
color: $white;
border-radius: 5px;
cursor:pointer
}
.previousBtn:hover,
.nextBtn:hover {
opacity: 0.5;
}

How to get the open/closed status of an ngb-accordion

I want to render two different icons/divs in the title of ngb-panels of an accordion depending on whether the panel is expanded or collapsed. The panels have some form content inside them.So when the panel is closed it displays one icon and when it is opened it must display the other icon.
HTML and CSS template example
input[type="text"],
select.form-control{
background: transparent;
border: none;
border-bottom: 1px solid #000000;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
}
input[type="number"],
select.form-control{
background: transparent;
border: none;
border-bottom: 1px solid #000000;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
}
input[type="text"]:focus,
select.form-control:focus {
-webkit-box-shadow: none;
box-shadow: none;
border-color:rgb(31, 14, 187);
}
input[type="number"]:focus,
select.form-control:focus {
-webkit-box-shadow: none;
box-shadow: none;
border-color:darkred;
}
::ng-deep .collapse {
transition: max-height .55s, opacity .35s ease-in-out;
max-height: 0;
opacity: 0;
display: block !important;
&.show {
max-height: 100rem;
opacity: 1;
}
}
::ng-deep .accordion {
.card {
margin-bottom: 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, .04) !important;
.card-header {
// padding-top: 0;
color: #000000;
padding: 0;
button {
padding: 1.2rem;
width: 100%;
span {
color: #5f5f5f;
float: left;
font-size: 1.2rem;
}
}
}
.card-body {
padding: 1rem;
}
}
}
<head><!-- CSS only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<ngb-accordion #acc="ngbAccordion" [destroyOnHide]='false' [closeOthers]="true" activeIds="ngb-panel-0">
<ngb-panel id="panel1">
<ng-template ngbPanelTitle>
<span *ngIf=""> <!-- condition when it is closed -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-x-circle"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
/>
<path
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
style="color: red;border-color: red;"
/></svg
> </span>
<span *ngIf="" ><!-- condition when it is opened -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-check-circle"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
/>
<path
d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"
style="color: green;"
/></svg
> </span>
<span>Primary Details </span>
<span style="margin-left: 85%;"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" style="color: black;background-color: black;"/>
</svg></span>
</ng-template>
<ng-template ngbPanelContent>
some content
</ng-template>
</ngb-panel>
<ngb-panel id="panel2">
<ng-template ngbPanelTitle>
<span *ngIf=" "> <!--condition when it is closed -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-x-circle"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
/>
<path
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
style="color: red;border-color: red;"
/></svg
> </span>
<span *ngIf=""> <!-- condition when it is opened -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-check-circle"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
/>
<path
d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"
style="color: green;"
/></svg
> </span>
<span>Secondary Details </span>
<span style="margin-left: 83.3%;"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" style="color: black;background-color: black;"/>
</svg></span>
</ng-template>
<ng-template ngbPanelContent>
<form #form2="ngForm" style="padding-left:20px;">
some more content
</form>
</ng-template>
</ngb-panel>
</ngb-accordion>
</body>
So, at *ngIf="" the status of whether the panel is closed or opened is checked and corresponding span is rendered. Please help me with the best way to check this status of panel.I have observed there are a couple of questions over this but they are not working.
You have a reference to an accordion in the acc variable thanks to this peace of code: #acc="ngbAccordion". To check if a panel expanded, you can use isExpanded method.
<ngb-accordion #acc="ngbAccordion" [destroyOnHide]='false' [closeOthers]="true" activeIds="ngb-panel-0">
<ngb-panel id="panel1">
<div>isActive: {{acc.isExpanded('panel1')}}</div>
</ngb-panel>
<ngb-panel id="panel2">
<div>isActive: {{acc.isExpanded('panel2')}}</div>
</ngb-panel>
</ngb-accordion>

CSS progress bar line not displaying

I have created a progress bar that works perfectly fine in codepen. But, inside my website, it acts out! Specifically, the line going through each step does not display properly.
.timeline {
overflow-x: hidden;
padding: 2.5rem 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
overflow-y: hidden;
/* border: 1px solid red; */
}
.step {
flex: 1 1 14.2%;
position: relative;
}
.past {
color: #d0d0d0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* border: 1px solid red; */
}
.past::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #ddd;
left: 50%;
top: 2.2rem;
z-index: -1;
}
.current {
color: #d0d0d0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
a {
text-decoration: none;
}
.roadmap-icon {
padding: 1rem;
z-index: 10;
background-color: white;
color: green;
border-radius: 50%;
width: 2rem;
height: 2rem;
border: 1px solid white;
box-shadow: inset 0 0px 3px 0 #3793b7, 0 2px 4px 0 rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
}
.roadmap-icon-selected {
font-size: 1.1rem;
padding: 1.2rem;
}
.future {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.future::before {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #ddd;
right: 50%;
top: 2.2rem;
z-index: -1;
}
.icon-text {
text-align: center;
}
<div class="timeline">
<div class="step">
<div class="past">
<a href="/project/add">
<div id="project_id" class="roadmap-icon">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-building" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022zM6 8.694L1 10.36V15h5V8.694zM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5V15z"
></path>
<path
d="M2 11h1v1H2v-1zm2 0h1v1H4v-1zm-2 2h1v1H2v-1zm2 0h1v1H4v-1zm4-4h1v1H8V9zm2 0h1v1h-1V9zm-2 2h1v1H8v-1zm2 0h1v1h-1v-1zm2-2h1v1h-1V9zm0 2h1v1h-1v-1zM8 7h1v1H8V7zm2 0h1v1h-1V7zm2 0h1v1h-1V7zM8 5h1v1H8V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm0-2h1v1h-1V3z"
></path>
</svg>
</div>
</a>
Step 1
</div>
</div>
<div class="step">
<div class="past">
<a href="/project/342/property/add/">
<div id="land_id" class="roadmap-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" class="bi bi-binoculars" viewBox="0 0 16 16">
<path
d="M3 2.5A1.5 1.5 0 0 1 4.5 1h1A1.5 1.5 0 0 1 7 2.5V5h2V2.5A1.5 1.5 0 0 1 10.5 1h1A1.5 1.5 0 0 1 13 2.5v2.382a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 15 7.118V14.5a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 14.5v-3a.5.5 0 0 1 .146-.354l.854-.853V9.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v.793l.854.853A.5.5 0 0 1 7 11.5v3A1.5 1.5 0 0 1 5.5 16h-3A1.5 1.5 0 0 1 1 14.5V7.118a1.5 1.5 0 0 1 .83-1.342l.894-.447A.5.5 0 0 0 3 4.882V2.5zM4.5 2a.5.5 0 0 0-.5.5V3h2v-.5a.5.5 0 0 0-.5-.5h-1zM6 4H4v.882a1.5 1.5 0 0 1-.83 1.342l-.894.447A.5.5 0 0 0 2 7.118V13h4v-1.293l-.854-.853A.5.5 0 0 1 5 10.5v-1A1.5 1.5 0 0 1 6.5 8h3A1.5 1.5 0 0 1 11 9.5v1a.5.5 0 0 1-.146.354l-.854.853V13h4V7.118a.5.5 0 0 0-.276-.447l-.895-.447A1.5 1.5 0 0 1 12 4.882V4h-2v1.5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V4zm4-1h2v-.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V3zm4 11h-4v.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5V14zm-8 0H2v.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5V14z"
/>
</svg>
</div>
</a>
step 2
</div>
</div>
<div class="step">
<div class="past">
<a href="/development/proforma/add">
<div id="proforma_id" class="roadmap-icon">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-card-checklist" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"
></path>
<path
fill-rule="evenodd"
d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"
></path>
</svg>
</div>
</a>
Step 3
</div>
</div>
<div class="step">
<div class="current">
<div id="development" type_id="" class="roadmap-icon roadmap-icon-selected">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
<path
fill-rule="evenodd"
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z"
/>
<path
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"
/>
</svg>
</div>
Step 4
</div>
</div>
<div class="step">
<div class="future">
<a href="/development/proforma/139/financing/add">
<div id="financing_id" class="roadmap-icon">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-cash-stack" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M14 3H1a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1h-1z"></path>
<path
fill-rule="evenodd"
d="M15 5H1v8h14V5zM1 4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H1z"
></path>
<path
d="M13 5a2 2 0 0 0 2 2V5h-2zM3 5a2 2 0 0 1-2 2V5h2zm10 8a2 2 0 0 1 2-2v2h-2zM3 13a2 2 0 0 0-2-2v2h2zm7-4a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"
></path>
</svg>
</div>
</a>
Step 5
</div>
</div>
<div class="step">
<div class="future">
<a href="/development/project/step6">
<div id="unit" mix_id="" class="roadmap-icon">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-layout-wtf" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M5 1H1v8h4V1zM1 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1H1zm13 2H9v5h5V2zM9 1a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H9zM5 13H3v2h2v-2zm-2-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H3zm12-1H9v2h6v-2zm-6-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H9z"
></path>
</svg>
</div>
</a>
<a href="/development/proforma/139/unit%20allocation/add" class="icon-text">
Step 6
</a>
</div>
</div>
<div class="step">
<div class="future">
<a href="/development/project/step7">
<div id="rates_id" class="roadmap-icon">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-card-list" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"
></path>
<path
fill-rule="evenodd"
d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5z"
></path>
<circle cx="3.5" cy="5.5" r=".5"></circle>
<circle cx="3.5" cy="8" r=".5"></circle>
<circle cx="3.5" cy="10.5" r=".5"></circle>
</svg>
</div>
</a>
Step 7
</div>
</div>
</div>
In my website, this is what I get when removing the z-index of the past::after and keeping the z-index = -1 in future::before. Note that when I inspect the element, the top, right, and z-index properties of .future::before are all greyed out with the hint i in front of it saying that "right has no effect on this element since it’s not a positioned element.
Try setting its position property to something other than static." The position of the .future::before is absolute and its immediate parent's position is .step is relative. How is it that the same browser displays the progress bar fine in one context and acts out in another context? Here is the screen-shot of the problem I have:

CSS Left align div regarding a center align parent div

My issue is certainly very easy regarding that i am new in css.
I will show you first a picture of my issue :
I am tryin to put the grey to the left of the content alignes with my other div. The issue is that my grey div is always centered.
.row {
display: flex !important;
justify-content: center;
align-items: center !important;
}
.payment-title-div {
color: #fff;
background: #1282a2;
width: 70%;
}
.u-left {
padding-top: 0.5em;
}
.return-div {
padding-left: 15%;
}
.payment-div {
background-color: lightgray;
width: 50%;
height: 400px;
}
<div class="row">
<div class="payment-title-div">
<h1 class="u-left size12">
<svg class="lock-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-shield-lock" viewBox="0 0 16 16">
<path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/>
<path d="M9.5 6.5a1.5 1.5 0 0 1-1 1.415l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99a1.5 1.5 0 1 1 2-1.415z"/>
</svg> <strong>Paiement sécurisé</strong>
</h1>
</div>
<div class="return-div">
<a class="titre" href="books"><svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
<path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
</svg>Retour à l'annonce</a>
</div>
<div class="payment-div">
</div>
</div>
Any indication ?
BR
Well I've copied your code and I didn't get the exact same from your picture, but I'd recommend this changes in your CSS code:
.row {
display: flex !important;
flex-direction: column; /* set the direction as column (one element above another) */
align-items: flex-start; /* align at start (left) */
}
.payment-title-div {
color: #fff;
background: #1282a2;
width: 100%; /* I've changed this to 100% */
}
.u-left {
padding-top: 0.5em;
}
.return-div {
/* padding-left: 15%; remove this padding */
}
.payment-div {
background-color: lightgray;
width: 50%;
height: 400px;
}
You can also check this Flexbox Guide to understand better how to work with flex boxes, It's really awesome am I right?

SVG icons on a round circle side by side another div, Bootstrap 4.5

I started to get into Bootstrap 4.5 and SVG for icons. I'm having a tough time understanding how it works atm. I want to place the SVG inside a shape (rounded-circle) for now. But would like that shape to be side by side another div. I can't move the div to place them on the same line. Following is a code snippet.
.svg-icon {
display: block;
margin: 0 auto;
position: absolute;
top: calc(50% - 14px);
left: calc(50% - 14px);
}
.poll-icon-container {
height: 50px;
width: 50px;
position: relative;
border-radius: 50%;
background-color: pink;
}
<div class="rounded-circle poll-icon-container text-success">
<svg
width="2em"
height="2em"
viewBox="0 0 18 18"
class="bi bi-box-arrow-in-up-right svg-icon"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M14.5 3A1.5 1.5 0 0 0 13 1.5H3A1.5 1.5 0 0 0 1.5 3v5a.5.5 0 0 0 1 0V3a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H9a.5.5 0 0 0 0 1h4a1.5 1.5 0 0 0 1.5-1.5V3z"
/>
<path
fill-rule="evenodd"
d="M4.5 6a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V6.5H5a.5.5 0 0 1-.5-.5z"
/>
<path
fill-rule="evenodd"
d="M10.354 5.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"
/>
</svg>
</div>
<div>
should be on the right side of the icon
</div>
As long as you are using Bootstrap, lets cover those 2 divs in one parent div and make them display flax in bootstrap way
d-flex - BS class to make block to display: flex;
justify-content-start - BS class to make justify-content: flex-start;
align-items-center - BS class to make align-items: center;
ml-3 - BS sizing class, margin-left: 1rem;
.svg-icon {
display: block;
margin: 0 auto;
position: absolute;
top: calc(50% - 14px);
left: calc(50% - 14px);
}
.poll-icon-container {
height: 50px;
width: 50px;
position: relative;
border-radius: 50%;
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="d-flex justify-content-start align-items-center">
<div class="rounded-circle poll-icon-container text-success">
<svg width="2em" height="2em" viewBox="0 0 18 18" class="bi bi-box-arrow-in-up-right svg-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M14.5 3A1.5 1.5 0 0 0 13 1.5H3A1.5 1.5 0 0 0 1.5 3v5a.5.5 0 0 0 1 0V3a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H9a.5.5 0 0 0 0 1h4a1.5 1.5 0 0 0 1.5-1.5V3z"
/>
<path
fill-rule="evenodd"
d="M4.5 6a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V6.5H5a.5.5 0 0 1-.5-.5z"
/>
<path
fill-rule="evenodd"
d="M10.354 5.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"
/>
</svg>
</div>
<div class="ml-3">
should be on the right side of the icon
</div>
</div>
Add inline css with position: absolute; check below snippet.
.svg-icon {
display: block;
margin: 0 auto;
position: absolute;
top: calc(50% - 14px);
left: calc(50% - 14px);
}
.poll-icon-container {
height: 50px;
width: 50px;
position: relative;
border-radius: 50%;
background-color: pink;
}
<div class="rounded-circle poll-icon-container text-success" style="display:inline-block;">
<svg
width="2em"
height="2em"
viewBox="0 0 18 18"
class="bi bi-box-arrow-in-up-right svg-icon"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M14.5 3A1.5 1.5 0 0 0 13 1.5H3A1.5 1.5 0 0 0 1.5 3v5a.5.5 0 0 0 1 0V3a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H9a.5.5 0 0 0 0 1h4a1.5 1.5 0 0 0 1.5-1.5V3z"
/>
<path
fill-rule="evenodd"
d="M4.5 6a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V6.5H5a.5.5 0 0 1-.5-.5z"
/>
<path
fill-rule="evenodd"
d="M10.354 5.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"
/>
</svg>
</div>
<div style="display: inline-block; margin-left:10px;line-height: 50px; position: absolute;">
should be on the right side of the icon
</div>