CODEWITHSUNDEEP
htmlcssbootstrap-4
vivek singh
vivek singh

Reputation: 457

How to align a rounded button inside a div using bootstarp

I have a div inside which I am trying to put a button, which should be responsive.

placing button inside is working fine but the issue is it is not responsive as the div changes its size accordingly.

<div className="mainDiv row">
     <div className="col-12 col-sm-12 col-md-3 col-lg-4 col-xl-4 mb-4">
        <div className="mt-5">
            <button className="btn testclass">
                <div className="showDot">top</div>
                <div className="someText">Middle</div>
            </button>
        </div>
    </div>
</div>

My Css

.testclass {
border: 4px solid #727272 !important;
border-radius: 50% !important;
box-sizing: border-box;
background-color: red;

}

Working example

.mainDiv {
  background-color: lightgreen !important;
  height: 300px
}

.testclass {
  border: 4px solid #727272 !important;
  border-radius: 50% !important;
  box-sizing: border-box;
  background-color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-4 col-sm-4 col-md-2 col-lg-1 col-xl-4 mb-1 mainDiv">
    <div class="mt-5">
      <button class="btn testclass">
         <div class="showDot">top</div>
         <div class="someText">Middle</div>
      </button>
    </div>
  </div>
</div>

What i want to do is to align that circular button at the bottom center of that container, which will be in center for every size (responsive)

Upvotes: 0

Views: 170

Answers (5)

Prakash Rajotiya
Prakash Rajotiya

Reputation: 1033

nothing much need to change. Only need to add few bootstrap classes. I have added three class as below mention -

d-flex - for flexbox

align-items-center - for vertical center

justify-content-center - for horizontal center

 <div class="col-4 col-sm-4 col-md-2 col-lg-1 col-xl-4 mb-1 mainDiv 
  d-flex align-items-center justify-content-center">

also remove mt-5 class from child div

Upvotes: 1

M123
M123

Reputation: 1255

Working Example,

.mainDiv {
  background-color: lightgreen !important;
  height: 300px
}

.testclass {
  border: 4px solid #727272 !important;
  border-radius: 50% !important;
  box-sizing: border-box;
  background-color: red;
}
.mt1-5{
   margin-top: 100px;
   text-align: center;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>

</style>
</head>
<body>
<div class="row">
  <div class="col-4 col-sm-4 col-md-2 col-lg-1 col-xl-4 mb-1 mainDiv">
    <div class="mt1-5">
      <button class="btn testclass">
                            <div class="showDot">top</div>
                            <div class="someText">Middle</div>
                        </button>
    </div>
  </div>
</div>
</body>

Add this ,

.mt-5{
   margin-top: 100px;
   text-align: center;
}

Remove margin-top: 3rem !important in .mt-5 class or make a new class.

Upvotes: 1

Oris Sin
Oris Sin

Reputation: 1234

Try to do this next thing in your html. On the parent element insert this.

<div class="col-4 col-sm-4 col-md-2 col-lg-1 col-xl-4 mb-1 mainDiv" style="display: table;text-align: center;">

and on the child element insert this.

   <div class="" style=" display: table-cell;vertical-align: bottom;">

I have tried with the snippet you provided and it works like a charm.

Upvotes: 0

Santiago Torrabadella
Santiago Torrabadella

Reputation: 119

You have to do two things:

First:

class="d-flex justify-content-center"

You should place this in the class where is the mainDiv. This should move your element to the center of the page.

Second:

class="d-flex align-items-end"

You should place this in the class where is the mainDiv. This should move your element to the bottom of the page.

Remember, d-flex is only needed one time in each element class.

So in the end you should write in the element called mainDiv

class="d-flex justify-content-center align-items-end"

Upvotes: 0

Fasid Mpm
Fasid Mpm

Reputation: 557

I assume that you want to align a button to be in center of a div

If Yes, Then, you just need to add this in .testclass

.testclass {
  border: 4px solid #727272 !important;
  border-radius: 50% !important;
  box-sizing: border-box;
  background-color: red;
  
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

Working example: https://codepen.io/fasid/pen/bGwKvdy

What i want to do is to align that circular button at the bottom center of that container, which will be in center for every size (responsive)

try changing above top: 40% to top: 90%

Upvotes: 0

Related Questions