Using Bootstrap 4 causes text to wrap buttons onto a separate line

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">&times</i>
        </button>
        <button class="btn btn-md float-right bg-primary"> 
         <i class="fas fa-print text-white">&times</i>
        </button>
      </div>
     </div>    
    </div>

Answer №1

If you're looking for a solution, please review the code below:

<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:10px;
        background-color:#eee;
        border-style: solid;
        border-radius: 5px;
        border-width: 1px;
        border-color: #337AB7;
     }
p.h3 {
display: inline-block;
width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
line-height: 1.4;
}
.float-right {
float: right;
}
</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</p>
<button class="btn btn-md float-right bg-primary" style="margin-left:10px;">
 <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>

https://i.sstatic.net/zfZZu.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamic color change in SVG

I am facing an issue with changing the color of svg images in a menu list using the filter CSS property. Even though I have obtained the correct filter value from a library that converts hex to CSS filter, React seems unable to set this property on the ima ...

When using the background-blend-mode property, transition-duration is not taken into account

Try hovering over the top left h1 element in this code example You'll notice that it smoothly changes the h1 element to a shade of blue in just 2 seconds. However, the transition doesn't affect the blend mode of the backgrounds. Even though the ...

The CSS top border is failing to display

For a school project, I've been attempting to add a top border to a set of hyperlinks in order to separate them from the title. However, after spending over an hour on this task, I still can't seem to get it to work. Below is the CSS code for th ...

Beautiful ExpressionChangedAfterItHasBeenCheckedError

I need your help Input field where I can enter a Student email or IAM, which will be added to a string array List displaying all the students I have added, using a for loop as shown below Delete button to remove a student from the array The list has a sp ...

The functionality of the button in my script is limited to a single use

Below is a simple code snippet that I wrote: HTML & CSS: <!DOCTYPE html> <html> <head> <title> JavaScript Console </title> <style> button { text-align:center; ...

Steps for updating the homepage to display a personalized welcome message to the user after logging in and redirecting using node.js and

Upon arriving at the homepage, simply click on the sign-in button. Once redirected back to the home page, you will notice a personalized greeting saying 'Welcome [user]'. Wondering how to achieve this? It's as simple as changing the text fro ...

What could be causing the HTML5 canvas not to show up on the screen?

<!doctype html> <html> <head> <title>Canvas test</title> </head> <body> <script type="text/javascript"> c = getElementById('canvas'); ctx = c.getContext("2d")' ctx.fillRect(10,10,10,10); </s ...

Creating a Triangle Slider Component with React and Material-UI (MUI)

Struggling with creating a price control using react js and MUI, similar to the image below: https://i.stack.imgur.com/ZP8oc.png I've searched online for libraries or solutions, but haven't found anything that works. ...

What is the best way to ensure that my <h1> header stays above my <h2> header at all times?

As a novice in web design, I recently took on the challenge of creating my own website. I am a graphic designer and came up with a mock-up of how I envision the site to look. While I managed to complete most parts of it, there's one specific area wher ...

What are some effective strategies for preventing CSS duplication?

What is the best way to prevent repeating CSS code like this: div#logo div:nth-child(1) div { width: 30%; height: 30%; background-color: white; } div#logo div:nth-child(3) div { width: 30%; height: 30%; background-color: white; ...

Is there a way for me to discover the identity of the victor?

There are 4 divs that move at different, random speeds each time. I am trying to determine which one is the fastest or reaches the goal first. Additionally, there is a betting box where you can choose a horse to bet on. I need to compare the winner with my ...

"Embracing Flexbox for a fully responsive mobile experience

What's the best way to make this flexbox design responsive for mobile devices? I want the layout to look consistent across both desktop and mobile screens. The issue seems to be related to the responsiveness of the flexbox and the smaller size of mobi ...

Show varying HTML headers on the initial page as opposed to subsequent pages

Currently, I am utilizing an HTML to PDF Library known as Nreco for converting HTML Pages into PDF format. The task at hand involves implementing a consistent header on every page, with the exception of the first page that should display the Recipient Addr ...

Tips for positioning an image and text side by side on the same line

https://i.sstatic.net/TwG4I.png Is there a way to display an Image and a Span in the same baseline using Bootstrap 4? I'm currently utilizing Bootstrap 4 for this purpose. <li class="nav-item active"> <a class="nav-link" href="#"> ...

Aligning the last element within a list

I'm having a major issue with this code. Despite reading all related posts, I still can't get it to work. Seems like I might be missing something obvious. LOL. Here is the site (best viewed in Chrome): and here is what I believe is the simplifi ...

Is there a bug in IE9 with CSS precedence?

Two CSS rules are in place: .avo-lime-table th, .avo-lime-table td { background-color: grey; } Next rule: .avo-lime { background-color: green; } All is functioning correctly in FireFox, Chrome, Opera and Safari. However, as usual, Microsoft&apos ...

Inserting HTML content into a DIV with the help of jQuery

Looking for a solution with my index.html file. I want to load other HTML files into a DIV by clicking on buttons. Here's an example of what I'm trying to achieve: I've searched through various examples online, but none seem to work for ...

I must break free! Angular's $sce is failing to manage links to audio files (Strict Contextual Escaping)

I have successfully implemented Angular and $sce in my project to handle HTML special characters and link video files in the database to a video player. However, I am facing issues connecting the HTML audio player to audio files stored in the same database ...

Tips on targeting specific HTML content

Looking for assistance. I'm trying to extract HTML content from test.php <p> This is the content of a paragraph or article on a web page</p> <p>[albumname=Mount Climbing]</p> I want to process those [albumname] tags into thum ...

Leveraging the Bootstrap 3 audio player, although displaying a standard HTML5 output

When trying to use the Bootstrap 3 player to display an audio player, I'm encountering an issue where the page only shows a default black HTML5 audio player output. Here is my current directory structure: miuse/ application/ bootstrap/ ...