I am facing an issue with my HTML page that displays correctly on medium and large devices but encounters difficulties on smaller screens. When the screen size decreases, the text inside the grey elements takes up all the space, causing the two right-floating buttons to move to a new line instead of staying at the same height.
Here is a snippet of the HTML code:
<div class="row mt-2">
<div class="col-sm-12 col-lg-4 offset-lg-1 gray">
<p class="h3 text-primary">Annoying text here
<button class="btn btn-md float-right ml-3 bg-primary">
<i class="fas fa-cogs text-white"></i>
</button>
<button class="btn btn-md float-right bg-primary">
<i class="fas fa-print text-white"></i>
</button>
</div>
</div>
The .gray CSS class looks like this :
.gray{
height: 70px;
margin-top: 10px;
padding-left: 20px;
padding-top:20px;
background-color:#eee;
border-style: solid;
border-radius: 5px;
border-width: 1px;
border-color: #337AB7;
}
I want the text to either be covered by the buttons without affecting their position or for it to collapse when the screen size reduces e.g. instead of displaying "Annoying text here", it could show "Annoying te...". If there is any confusion in my explanation, please let me know so I can clarify further! Thank you.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<style type="text/css">
.gray{
height: 70px;
margin-top: 10px;
padding-left: 20px;
padding-top:20px;
background-color:#eee;
border-style: solid;
border-radius: 5px;
border-width: 1px;
border-color: #337AB7;
}
</style>
<div class="container">
<div class="row mt-2">
<div class="col-sm-12 col-lg-4 offset-lg-1 gray">
<p class="h3 text-primary">Annoying text here
<button class="btn btn-md float-right ml-3 bg-primary">
<i class="fas fa-cogs text-white">×</i>
</button>
<button class="btn btn-md float-right bg-primary">
<i class="fas fa-print text-white">×</i>
</button>
</div>
</div>
</div>