Align the '::before' item and another div element horizontally at the center using the flex concept in Bootstrap 4

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e6ebebf0f7f0f6e5f4c4b0aab7aab5">[email protected]</a>/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>

Using bootstrap 4.3.1 with flex concept and custom CSS. The status-light div items are not centered horizontally. Looking for a logical solution without adding custom top property values like top:58% or top:58px.

htmlcssbootstrap-4flexbox

Answer №1

Utilizing vertical translation can help align it with the other text elements on the page. It appears that the unnecessary span and paragraph elements have been removed.

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a1acacb7b0b7b1a2b383f7edf0edf2">[email protected]</a>/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>

Answer №2

To match the line-height of the container, you can set the p element to have the same line-height - in this example, borders and padding are added for clarity on the layout. I've also converted some p elements to divs as it appears to align better with your needs.

.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;  
}

.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>

As shown by the 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4f4242595e595f4c5d6d19031e031c">[email protected]</a>/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>

Answer №3

Remove any padding from the <p> element.

In order to properly align the red dot, include top: calc(50% - 5px); in the ::before selector.

For more information on how to use the calc() function in CSS, check out MDN's documentation.

.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;
}

If you're encountering issues with alignment, consider adjusting the parent container's flex properties like this:

.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;
...

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

Included adaptable background-images in the upload

Recently, I developed a RoR based app/website that allows clients to upload their own background image to the cover page. Although the current setup works well with a single image, I am aiming to enhance the site's responsiveness by enabling clients t ...

ruby-on-railscssamazon-s3paperclipbackground-image

The CSS button remains stubbornly unchanging in color

After acquiring a template from the internet, I attempted to adjust some colors by modifying the CSS file. Strangely enough, the changes were not reflected on the website: HTML: .user-panel { float: right; font-weight: 500; background: #f ...

htmlcssdjangocolors

determining the number of td elements in a row of a table located within an iframe

When I interact with a cell in a table within an iframe, I want to determine the number of cells in that row. If a cell is actually a span element, I would like to consider it as part of the cell count. The iframe may contain multiple tables without any s ...

jqueryhtmliframe

Enable Bootstrap columns to dynamically adjust their width based on available space within a row

Upon running the code below and hovering over the rendered elements, you may notice an empty space between the left and middle elements: <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cf ...

csstwitter-bootstrapbootstrap-5

Having trouble retrieving the URL from JSON data - every time I attempt to access it, it just shows as undefined. Any suggestions

Having trouble extracting the URL from JSON, as it shows undefined. Any suggestions? <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta> <script language="JavaScript" type="text/javascript" ...

javascriptjqueryhtmljson

Ways to avoid HTML within <span> or <div> elements

<h4> <span class="title"> <textarea rows="4" cols="50"> How are you. </textarea> </span> </h4> Is there a way to treat <textarea rows="4" cols="50"> How are you. </textarea> as plain text and n ...

javascriptjqueryhtmlescaping

The background image is overly magnified

I've been having an issue with the background image on my div looking too zoomed in and losing its clarity. Below is the HTML and styling that I have attempted: <div class="grid-x intro"> <div class="cell large-12 medium-12 small-12 ...

htmlcsszurb-foundation

Create a visually appealing HTML5 form using AngularJS ng-model for inputting a phone number and Tax ID number

I am working on improving the appearance and functionality of a basic <input> form field for phone number and tax ID entry. Phone numbers can be in various formats: xxx.xxx.xxxx xxx-xxx-xxxx (xxx) xxx-xxxx Tax IDs may look like: xxx-xx-xxxx xx- ...

javascriptangularjshtmlforms

Can you guide me on implementing CSS Houdini in Next.js?

Exploring the world of CSS Houdini in my Next.js project has been quite an adventure. After successfully installing the necessary CSS Houdini package and css-paint-polyfill using yarn, I decided to follow the webpack guidelines provided at . Below is a sn ...

cssreactjswebpacknext.jscss-houdini

Ways to confine the tabindex within a specific div container

I am currently working on identifying examples of bad accessibility practices. Specifically, I am focusing on issues related to Keyboard Focus. The first example I have encountered is the lack of visibility when trying to navigate through a set of buttons. ...

javascriptjqueryhtmlcssweb

Broken hyperlinks on images that have been crossfaded are causing issues

I am currently working on a unique design feature that involves 5 crossfading images with hover divs appearing above them. To achieve this effect, I have added link references to each image and set the CSS properties accordingly for smooth animation. In ...

htmlcss

Do GPU-intensive animations get impacted by the CPU's load?

I have set up a special compositing layer for a div with the following unique styles: div { position: absolute; height: 50px; width: 50px; background: #900; top: 100px; left: 200px; will-change: transform; transform: translateZ(0); } Afte ...

javascriptcsscss-animations

Modifying attributes for individual components in Vue.js classes

Recently, I integrated a reusable component called "LightBox" into my website, which displays images in higher resolution. The LightBox functionality is linked to each element having a thumbnail. However, I encountered an issue. There are multiple elements ...

javascriptcssvue.jsvue-componentvuejs3

Showcasing articles in an XML feed according to specific keywords found in the headline

I'm currently working on designing a website for a client and I want to minimize my involvement in its maintenance. I am considering using RSS feeds to automate the process by having content posted on Blogger and then feeding it to the site. However, ...

javascripthtmlwebrssfeed

Display and conceal specific table cells based on a user's search for a singular cell

I recently wrote a jQuery script to filter rows in a table based on user input. However, I encountered an issue with my current code when trying to search for a specific string within the table. Here's the scenario: a|b|c|d| e|f|g|h| i ...

jqueryhtmlajax

How to access the CSS and JS files in the vendor folder using linemanjs

Currently, I am in the process of developing a web application utilizing linemanjs. However, I have encountered an issue where the vendor css and js files are not being referenced correctly when explicitly included. I would appreciate any guidance on what ...

javascripthtmlcssnode.jslinemanjs

Ways to prevent horizontal scrolling in an image

Currently, I am working on a scrolling animation page that is optimized for mobile devices. One issue I am encountering is when an element is larger than the screen size, such as when an image is wider than the mobile device. In this scenario, the user can ...

javascripthtmlcsswebmobile

Having issues integrating Soundcloud iframe into Bootstrap 4

Explore the website First and foremost, I want to express my gratitude to all those who are willing to assist me! As a complete beginner, I hope my explanation will be clear enough. I am in the process of constructing a music label website using Bootstrap ...

htmltwitter-bootstrapbootstrap-4soundcloud

When trying to implement a dark/light theme, CSS variables may not function properly on the body tag

Currently, I am in the process of developing two themes (light and dark) for my React website. I have defined color variables for each theme in the main CSS file as shown below: #light{ --color-bg: #4e4f50; --color-bg-variant: #746c70; --color-primary: #e2 ...

javascripthtmlcssreactjs

execute a function upon selecting a radio button

Below is the HTML code that includes two radio buttons. The default checked button is the "lease" option. <input id="quotation_request_payment_option_lease" class="choose_payment_option" name="quotation_request[payment_option]" type ...

javascriptjqueryhtmljquery-events