Horizontally centre '::before' item and other div element with flex concept in Bootstrap 4

user_10311295 0
Viewed 60

.status-light-red::before{
  background-color: rgb(255, 0, 0);
  box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}

.status-light::before{
  content: "";
  height: 10px;
  width: 10px;
  position: absolute;
  border-radius: 50%;
  top:50%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">

<div class="container py-5">
   <div class="row job-list-view-section">
      <div class="col-12">
         <div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
            <div>
               <span>1</span>
            </div>
            <div>
               <p>Company Name</p>
            </div>
            <div>
               <p>Applied Job For</p>
            </div>
            <div>
               <p>status</p>
            </div>
            <div class="status-light status-light-red"></div>
         </div>
      </div>
   </div>
</div>

I am using here bootstrap 4.3.1 with flex concept with some custom pieces of CSS. Here the status-light and other div items are not proper center horizontally, how am I doing center horizontally?

Note: Don't want a solution by adding custom top property value (Ex. top:58%; or top:58px;), I need a proper logical solution.

flexbox bootstrap-4 css html
3 Answers

You might use vertical translation to bring it up in line with the text elements. Notice that I stripped out the span and paragraph elements which don't seem to be doing anything.

.status-light-red::before{
  background-color: rgb(255, 0, 0);
  box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}

.status-light::before{
  content: "";
  height: 10px;
  width: 10px;
  position: absolute;
  border-radius: 50%;
  transform: translateY(-50%);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">

<div class="container py-5">
   <div class="row job-list-view-section">
      <div class="col-12">
         <div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
            <div>1</div>
            <div>Company Name</div>
            <div>Job Applied For</div>
            <div>Status</div>
            <div class="status-light status-light-red"></div>
         </div>
      </div>
   </div>
</div>

user_12648040

You can give the p the same line-height as the container - here I added some borders and padding just to be painfully obvious what is where. I also made some p into a div because that seems "cleaner" given your requirement.

.job-list-view-section {
  border: 2px blue solid;
  padding: 0.25rem;
}

.job-list-view-section .col-12 {
  border: 1px red solid;
  padding: 0.25rem;
}

.job-list-view-section .col-12 .d-flex {
  padding: 0.25rem;
}

.job-list-view-section .col-12 .my-shadow>* {
  border: 1px green solid;
  display: flex;
  align-items: center;
  justify-content: center;
  height:3rem;
}

.job-list-view-section .col-12 .my-shadow>*>p {
  background-color: #ddffdd;
  display: inline-block;
  align-self: flex-start;
  line-height: 2.9rem;  /*match to align text in the p to the green box, less than 3 for the borders */
}

.wrap-things {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px lime;
  align-self: center;
}

.status-light {
  border: solid 1px lime;
  height: 0.5rem;
  width: 0.5rem;
}

.status-light-red::before {
  background-color: rgb(255, 0, 0);
  box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}

.status-light::before {
  content: "";
  border-radius: 50%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container py-5">
  <div class="row job-list-view-section">
    <div class="col-12">
      <div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
        <div>
          <span>1</span>
        </div>
        <div>
          <div>Company Name</div>
        </div>
        <div>
          <p>Applied Job For</p>
        </div>
        <div>
          <div>status</div>
        </div>
        <div class="wrap-things">
          <div class="status-light status-light-red"></div>
        </div>
      </div>
    </div>
  </div>
</div>

See, borders:

.status-light-red::before{
  background-color: rgb(255, 0, 0);
  box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}

.status-light::before{
  content: "";
  height: 10px;
  width: 10px;
  position: absolute;
  border-radius: 50%;
  top:50%;
}

.my-shadow >div{border: solid 1px red;}
.my-shadow >div>p{border: solid 1px lime;}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">

<div class="container py-5">
   <div class="row job-list-view-section">
      <div class="col-12">
         <div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
            <div>
               <span>1</span>
            </div>
            <div>
               <p>Company Name</p>
            </div>
            <div>
               <p>Applied Job For</p>
            </div>
            <div>
               <p>status</p>
            </div>
            <div class="status-light status-light-red"></div>
         </div>
      </div>
   </div>
</div>

user_1259810

Remove the padding from <p>.

Also, to align the red dot add top: calc(50% - 5px); to ::before.

See MDN calc.

.status-light-red::before{
  background-color: rgb(255, 0, 0);
  box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}

.status-light::before{
  content: "";
  height: 10px;
  width: 10px;
  position: absolute;
  border-radius: 50%;
  top: calc(50% - 5px);
}

.job-list-view-section p{
  margin-bottom: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="container py-5">
   <div class="row job-list-view-section">
      <div class="col-12">
         <div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
            <div>
               <span>1</span>
            </div>
            <div>
               <p>Company Name</p>
            </div>
            <div>
               <p>Applied Job For</p>
            </div>
            <div>
               <p>status</p>
            </div>
            <div class="status-light status-light-red"></div>
         </div>
      </div>
   </div>
</div>

also, you could try displaying the parent flex like

.status-light-red::before {
  background-color: rgb(255, 0, 0);
  box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light{
  display: flex;
  align-items: center;
  justify-content: center;
}
.status-light::before{
  content: "";
  height: 10px;
  width: 10px;
  position: absolute;
  border-radius: 50%;
  /*top pos removed*/
}

.job-list-view-section p {
  margin-bottom: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="container py-5">
  <div class="row job-list-view-section">
    <div class="col-12">
      <div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
        <div>
          <span>1</span>
        </div>
        <div>
          <p>Company Name</p>
        </div>
        <div>
          <p>Applied Job For</p>
        </div>
        <div>
          <p>status</p>
        </div>
        <div class="status-light status-light-red"></div>
      </div>
    </div>
  </div>
</div>

user_180013010
Related