This solution incorporates the updated code from your question along with necessary adjustments to the animate.css and Bootstrap4 drop-down elements to better align with the specified requirements as I interpreted them:
CSS
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(9rem, 2rem, 0);
transform: translate3d(9rem, 2rem, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 2rem, 0);
transform: translate3d(0, 2rem, 0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(9rem, 2rem, 0);
transform: translate3d(9rem, 2rem, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 2rem, 0);
transform: translate3d(0, 2rem, 0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
.dropdown-item {
height: 2rem !important;
margin-bottom: 1rem !important;
padding: 1rem !important;
width: 25rem !important;
}
This solution is fully flexible and can be further refined according to your needs. Let's collaborate to fine-tune it together : )
Key points to consider:
The use of Bootstrap 4 classes text-right and dropdown-menu-lg-left together can cause issues. The menu button does not shift left when text-right is applied to col-md-5.
I adjusted the 'y' attribute in the translate3d function for slideInRight to appear below the button. If you prefer the menu-item to cover the button during animation, all instances of translate3d should have the 'y' element set back to 0:
translate3d(9rem, 2rem, 0); should become translate3d(9rem, 0, 0);
and similar changes made wherever translate3d is used.
The modifications to the dropdown-item attributes showcase the adaptability of this component without relying on inline styles (as seen in your original code).
I trust this response aids you, Feroz. Don't hesitate to reach out so we can work together to refine the solution to meet your specifications. : )
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(9rem, 2rem, 0);
transform: translate3d(9rem, 2rem, 0);
visibility: visible;
}
...
.dropdown-item {
height: 2rem !important;
margin-bottom: 1rem !important;
padding: 1rem !important;
width: 25rem !important;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!-- <div class="container"> -->
<div class="row m-0">
<div class="col-md-7"></div>
<div class="col-md-5">
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
Right-aligned
</button>
...
</body>
</html>