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
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.
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%
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"
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.
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)
could you help me with small snippet ? for both
It works for me, make sure you have called bootstrap-4 correctly
The element doesn’t move at all or ir does crazy things?
It dosen’t move, a small snippet can help
Substitute className=”mainDiv row” for className=”mainDiv row d-flex justify-content-center align-items-end”