Horizontal center align circle on mobile screen

HTML & CSS
1

hi,
I am using css to create a circle.
but i am having problem center aligning the circle.
how do i horizontal center align CIRCLE on mobile screen.
i am using boostrap 4 for responsive
thanks
vineet
here is my code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    
<style>
.buy-row{background-color: #134e8f; padding-top: 20px; padding-bottom: 20px;}
.plan-circle {
  background: white;
  width: 175px; 
  height: 175px;
  border-radius: 50%;
  display: flex; /* or inline-flex */
  align-items: center; 
  justify-content: center;
  margin-bottom: 10px;
 }
.plan-circle p{font-size: 18px; line-height: 22px;}
.numbr{font-size: 63px; color: #f36507; display: inline-block; margin-bottom: 0px;  }
</style>
 </head>
<body>
  

  <!--buy starts-->
  <div class="row buy-row mx-auto">
<div class="container">
  <h4 class="text-center text-uppercase text-white">BUY IN 3 SIMPLE STEPS</h4>
<div class="row col-lg-12 col-md-12 col-sm-8 mx-auto">
<div class="col-lg-3 col-md-6 bg-primary"><div class="plan-circle"><p class="text-center"><span class="numbr">1.</span><br>create your plan</p></div></div>
<div class="col-lg-3 col-md-6 bg-secondary"><div class="plan-circle"><p class="text-center"><span class="numbr">2.</span><br>pay for plan</p></div></div>
<div class="col-lg-3 col-md-6 bg-danger"><div class="plan-circle"><p class="text-center"><span class="numbr">3.</span><br>step no 3</p></div></div>
<div class="col-lg-3 col-md-6 bg-success"><div class="plan-circle"><p class="text-center"><span class="numbr">4.</span><br>all donen</p></div></div>
</div>
</div>
  </div>
  <!--buy ends-->

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
2 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
    />

    <style>
      .buy-row {
        background-color: #134e8f;
        padding-top: 20px;
        /* padding-bottom: 20px; */
      }
      .circle-container {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .plan-circle {
        background: white;
        width: 175px;
        height: 175px;
        border-radius: 50%;
        display: flex; /* or inline-flex */
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        margin-top: 10px;
      }
      .plan-circle p {
        font-size: 18px;
        line-height: 22px;
      }
      .numbr {
        font-size: 63px;
        color: #f36507;
        display: inline-block;
        margin-bottom: 0px;
      }
    </style>
  </head>
  <body>
    <!--buy starts-->
    <div class="row buy-row mx-auto">
      <div class="container">
        <h4 class="text-center text-uppercase text-white">
          BUY IN 3 SIMPLE STEPS
        </h4>
        <div class="row col-lg-12 col-md-12 col-sm-8 mx-auto">
          <div class="col-lg-3 col-md-6 bg-primary circle-container">
            <div class="plan-circle">
              <p class="text-center">
                <span class="numbr">1.</span><br />create your plan
              </p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 bg-secondary circle-container">
            <div class="plan-circle">
              <p class="text-center">
                <span class="numbr">2.</span><br />pay for plan
              </p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 bg-danger circle-container">
            <div class="plan-circle">
              <p class="text-center">
                <span class="numbr">3.</span><br />step no 3
              </p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 bg-success circle-container">
            <div class="plan-circle">
              <p class="text-center">
                <span class="numbr">4.</span><br />all donen
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--buy ends-->

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>
1 Like
3

hi subhasishmishra3

your code works perfect.
thanks
vineet

1 Like
4

hi
do you know how to connect these circles with dashed line behind them.
i tried creating it but the line doesnt go behind circle.
if i use z-index:-1 then it disappears.

here is the code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
    />

    <style>
      .buy-row {
        background-color: #134e8f;
        padding-top: 20px;
        /* padding-bottom: 20px; */
        
      }
      .circle-container {
        display: flex;
        align-items: center;
        justify-content: center;
        
      }
      .plan-circle {
        background: white;
        width: 175px;
        height: 175px;
        border-radius: 50%;
        display: flex; /* or inline-flex */
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        margin-top: 10px;
        
      }
      .plan-circle p {
        font-size: 18px;
        line-height: 22px;
      }
      .numbr {
        font-size: 63px;
        color: #f36507;
        display: inline-block;
        margin-bottom: 0px;
      }
      .plan-circle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 0;
	border-bottom: 3px dashed red;
		z-index: 0;
}
    </style>
  </head>
  <body>
    <!--buy starts-->
    <div class="row buy-row mx-auto">
      <div class="container">
        <h4 class="text-center text-uppercase text-white">
          BUY IN 3 SIMPLE STEPS
        </h4>
        <div class="row col-lg-12 col-md-12 col-sm-8 mx-auto">
          <div class="col-lg-3 col-md-6 circle-container">
            <div class="plan-circle">
              <p class="text-center">
                <span class="numbr">1.</span><br />create your plan
              </p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 circle-container">
            <div class="plan-circle">
              <p class="text-center">
                <span class="numbr">2.</span><br />pay for plan
              </p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 circle-container">
            <div class="plan-circle">
              <p class="text-center">
                <span class="numbr">3.</span><br />step no 3
              </p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 circle-container">
            <div class="plan-circle">
              <p class="text-center">
                <span class="numbr">4.</span><br />all donen
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--buy ends-->

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>
1 Like
5

Set the stacking context z-index to zero and then it won’t go behind the blue background but will go behind the white circle.

.circle-container{z-index:0;}     
.plan-circle::after {z-index:-1}
1 Like
6

hi PaulOB
thanks a lot
its now working perfect.
vineet

2 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.