How to align button with banner top right corner with all resolution changes. I added below code but if we change the resolutions buttons are misaligned to top or bottom of the screen. Could you please help me how to keep the same position(bottom right corner) with all resolutions.
Here is the html code:
.button1 {
background-color: #e442d0;
border: none;
color: white;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 7px 12px;
cursor: pointer;
font-weight: 500;
border-radius: 0px;
}
.button2 {
background-color: #9c50d6;
border: none;
color: white;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 7px 4px;
cursor: pointer;
font-weight: 500;
border-radius: 0px;
}
.header {
height: 500px;
}<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div>
<div
class="col-sm-12 header"
style="
background-image: url(https://i.pinimg.com/originals/1b/90/7c/1b907cad177181b12cea64203dcb7623.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
"
>
<div class="row">
<div class="" style="margin-top: 23%"></div>
<div class="" style="display: flex; justify-content: flex-end;">
<div>
<button class="btn btn-primary button1">Button1</button>
</div>
<div>
<button class="btn btn-success button2">Button2</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>If you need them at the bottom right corner in all resolutions, absolute positioning will be a better option than making a flex.
Your code becomes:
.button1 {
background-color: #e442d0;
border: none;
color: white;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 7px 12px;
cursor: pointer;
font-weight: 500;
border-radius: 0px;
position: absolute;
bottom: 16px;
right: 96px;
}
.button2 {
background-color: #9c50d6;
border: none;
color: white;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 7px 4px;
cursor: pointer;
font-weight: 500;
border-radius: 0px;
position: absolute;
bottom: 16px;
right: 16px;
}
.header {
height: 500px;
position: relative;
}<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div>
<div
class="col-sm-12 header"
style="
background-image: url(https://i.pinimg.com/originals/1b/90/7c/1b907cad177181b12cea64203dcb7623.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
"
>
<div>
<button class="btn btn-primary button1">Button1</button>
<button class="btn btn-success button2">Button2</button>
</div>
</div>
</div>
</body>
</html>