I am facing an issue with my modal button and header alignment. The button, which has inline-block display, needs to be positioned further to the right while keeping the header element centered.
Adjusting the padding of the item container did not yield the desired result. What other solutions can I try?
.btn.btn-info.btn-md {
background: #104723;
border-color: #104723;
border-radius: 3px;
float: right;
display: inline-block;
position: absolute;
}
.btn.btn-info.btn-md:active {
background: #104723;
border-color: #104723;
border-radius: 3px;
float: right;
display: inline-block;
position: absolute;
margin-right: -40px;
}
.pageheadh {
font-size: 30px;
font-weight: bolder;
color: black;
text-align: center;
display: inline-block;
}
.pageheadp {
text-align: center;
color: black;
font-weight: bold;
}
.center {
align-items: baseline;
justify-content: center;
text-align: center;
padding-right: 10px;
} <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Datatables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://nightly.datatables.net/js/dataTables.bootstrap.js"></script>
<!-- Trigger the modal with a button -->
<div class="center">
<h3 class="pageheadh">Fitness Tracker</h3>
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal" >Prize Plaza</button>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<embed src="https://ak.picdn.net/shutterstock/videos/3998236/thumb/3.jpg" frameborder="0" width="100%" height="100%">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<p class= "pageheadp">Click on any of the tabs to track your progress in that category. </p>
<!--<input type="text" class="global_filter" id="global_filter">-->
<div class="clearfix"></div>
...