Turn off column wrapping in Bootstrap 4

I'm currently facing a specific scenario:

<div class="row no-gutters">
    <div class="col"></div>
    <div class="col col-auto"></div>
</div>

Essentially, the first column will take up any available space not occupied by the second column.

In other words: [ |--------column1--------| |column2| ]

My problem arises when the content within column1 exceeds the width of the row it's in. Instead of column1 adjusting its size to fit both columns on the same line, it expands to fill the entire row as if it were col-12, causing column2 to shift to a new line.

Is there a way to avoid this behavior and ensure that both columns always remain on the same line?

csshtmltwitter-bootstrapflexboxbootstrap-4

Answer №1

Typically, the flex-nowrap class is applied to a row in Bootstrap 4 to stop column wrapping. However, this approach may not be effective when dealing with wide content that needs to display as an ellipsis.

Due to how flexbox calculates width (detailed explanations can be found here and here), it's recommended to specify a width, min-width, or max-width on the flex-grow:1 column (col).

One solution is to set width:0 on the col...

<div class="row no-gutters">
    <div class="col">
        <h4 class="ellipsis">aaaaaa..</h4>
    </div>
    <div class="col-auto d-flex align-items-center">
        something
    </div>
</div>

.col {
  width: 0;
}

Furthermore, avoid using both col and col-auto on the same column as the flex-grow:1 of col will prevent the col-auto from shrinking.

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

how to use AngularJS filter and ng-options to format specific options as bold in a select dropdown

I am currently utilizing AngularJS ng-options to populate specific select elements. I am interested in bolding and disabling certain options. Despite trying to achieve this using the filter along with ng-options, I have been unsuccessful so far. While I ca ...

javascripthtmlangularjsangularjs-filterangularjs-controller

What is the best way to continuously loop the animation in my SVG scene?

After designing a SVG landscape with an animation triggered by clicking the sun, I encountered an issue where the animation only works once. Subsequent clicks do not result in any animation. Below is my current JavaScript code: const sun = document.getEle ...

javascriptcssanimation

Customizing PrimeReact Styles

I've been on a quest to find the perfect solution for customizing the default 'Nova' theme used in Prime React. While I know there is a theme designer available for purchase, I'd prefer not to go that route. In the past, I found myself ...

htmlcssreactjssassprimereact

What could be the reason for the malfunctioning transition effect in my slider animation?

Having trouble getting my slider animation to work. I've tried different CSS styles but the slide transition is not functioning as expected. When one of the buttons is clicked, I want the slide to change from right to left or left to right. Can anyone ...

javascriptcssvue.jsvuejs3

Prevent Android WebView from attempting to fetch or capture resources such as CSS when using loadData() method

Context To many, this situation might appear to be repetitive. However, I assure you that it is not. My objective is to import html data into a WebView, while being able to intercept user hyperlink requests. During this process, I came across this helpfu ...

javascriptandroidhtmlcsswebview

The CSS classes in Bootstrap 4 are not rendering correctly on Chrome browser

I'm a frontend novice, so the solution might be quite simple. This project is using Angular 7. I'm currently following a tutorial on YouTube (https://www.youtube.com/watch?v=nZbZ5AHZJnc&t=1s) on how to integrate Bootstrap with Angular. The ...

bootstrap-4

"I'm looking for a way to display the validation summary text in a custom alert using ASP.NET. Can anyone help with

For a recent project at school, I have been tasked with creating an ASP website. One of the features on the login form is several validators and a validation summary. Although the validation summary itself is working correctly, I am looking to extract the ...

c#jqueryasp.nettwitter-bootstrap

Applying class to target specific screen size in Bootstrap

I've been utilizing bootstrap for my project. My objective is to assign multiple classes based on screen size, such as sm-col and xs.col. For example, let's say I have a text id <div id="text" class="xs-format lg-format ..."></div> ...

csstwitter-bootstrapbootstrap-4column-count

Tips for showcasing the button label on a different page upon clicking the button

I need help with a functionality where the name of a button clicked on one page is displayed on another page. Here's an example: <a href="#" class="btn btn-danger btn-lg btn-block"> <?php echo $sql->name; ?></a> Currently, echo ...

javascriptphphtmlmysql

`Is it possible to modify the background color of InputAdornment in Material-UI TextField?`

For the first 10% of the text field, one background color is used, while for the remaining 90%, another background color is applied. <TextField className={classes.root} type="text" placeholder="username" var ...

cssreactjsmaterial-uitextfield

Tips for creating a full-screen first page while keeping the others standard

Looking to create a dynamic HTML5/CSS/JS Website where the first page always displays in fullscreen mode with a background image, while the subsequent pages appear in a normal layout. Here's an example of what I'm aiming for: I've created ...

jquerycsshtmlfullscreenfullpage.js

Despite following all the correct steps, the tailwind CLI remains unresponsive. Additionally, the default button fails to display any content

view the document and my packages (image) Although it worked with the cdn, I'm puzzled why I can't use it properly with the cli ...

htmlcssnpmtailwind-csstailwind-ui

Enhancing the appearance of forms on Wordpress using ninja forms styling techniques

Seeking assistance in styling a form. After attempting CSS modifications, the form still lacks a background color. Can anyone provide guidance? #nf-form-8-cont { background-color: rgb(214, 214, 194,0.5); padding: 15px; box-shadow: 0px 3p ...

csswordpressformsbrowserstyles

What is the best way to align an InputAdornment IconButton with an OutlinedInput in Material-UI?

Struggling to replicate a text input from a mockup using Material-UI components. Initially tried rendering a button next to the input, but it didn't match. Moving on to InputAdornments, getting closer but can't get the button flush with the input ...

javascriptcssreactjsuser-interfacematerial-ui

The height of the footer element is gradually dwindling

Have you ever wondered why a footer element mysteriously shrinks in height when the browser window is resized? I attempted to create a fiddle with my code, but unfortunately, it's not replicable on JSFiddle so I won't be sharing it. This is how ...

htmlcss

What is the best way to transfer the value of a radio button, retrieved from a database, to a textbox?

Greetings, I am trying to figure out how to pass the value of a radio button to a textbox using jQuery and PHP. The radio buttons are generated dynamically based on rows from my database, so I set the row ID as the ID for each radio button. However, the co ...

javascriptphpjqueryhtml

The art of linking JavaScript events

I'm encountering some challenges with linking events together. I've set up an eventListener on a variety of links that, when hovered over, trigger a drop-down menu to appear. Everything is functioning properly, but I also want triangular shapes ...

javascripthtml

The Tailwind CSS file has been generated without any variables included

While utilizing Tailwind with a PostCSS configuration that generates a CSS file for production, only the necessary CSS classes are included in the file. However, upon inspecting the CSS file, I came across numerous empty CSS variables that seem unnecessary ...

cssvue.jstailwind-csspostcsstailwind-3

Arrange flexbox containers side by side in a horizontal row

I am attempting to create two flexbox containers one after the other, utilizing a combination of classes to achieve this layout. While the flexbox is created successfully, I encounter an issue where the lower container goes below the upper one when scrolli ...

htmlcssdjangobootstrap-4flexbox

Creating a flexible Bootstrap 3 layout that responds to the size of a div, not just the screen

Having a web page layout with a main content area and a fixed-width sidebar is proving to be a challenge. I want the content displayed in both sections to be responsive, adjusting based on the size of their respective parent divs rather than the screen siz ...

htmlcsstwitter-bootstrap