Having trouble with displaying Bootstrap 5 columns inline?

My HTML layout for a music player using Bootstrap 5 is coming along nicely. One part of the player I'm working on involves displaying information about the current pattern in a song.

Here's what I have in mind. I want to create a layout with two columns. The left column will contain an ordered list of pattern numbers displayed vertically. This column should be quite narrow.

The right column will be the pattern data section, which will show the data of the currently playing pattern. This column may be wider depending on the data.

My goal is to have these two columns displayed side by side. However, in cases where there's a lot of data for a pattern or if the viewport is small, the second column might drop below the first. I want to ensure that the columns always remain next to each other, with the first column taking up only the necessary width and the second column occupying the rest of the space.

Below is a snippet to give you an idea. If you resize your browser window, you'll notice that the pattern-data column moves below the order-list column. My aim is to keep them adjacent to each other.

How can I tweak the code so that #pattern-data stays to the right of #order-list at all times, even when the viewport is small or the table has numerous columns?

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Utilizing the .row class in combination with the .flex-nowrap class will prevent columns from stacking vertically. Instead, all columns will remain in a single row horizontally, regardless of the screen width. Check out the updated code below:

td.fixed-col {
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

td.row-num-col {
    width: 3em;
}

td.tracker-col {
    width: 4em;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfbdb0b0abacabadbeaf9feaf1edf1ee">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

<body>
    <div class="container my-2 mx-1 py-2 bg-light rounded" id="info">
        <!-- Irrelevant container showing playback controls -->
    </div>
    <div class="container my-2 mx-1 py-2 bg-light rounded">
        <div class="row flex-nowrap" style="overflow-x: auto;">
            <!-- Should be narrow and on the left side --> 
            <div class="col-auto" id="order-list">
                <div id="order_list" class="column text-warning bg-dark rounded p-3 font-monospace text-center">
                    <div id="order-0">0</div>
                    <div id="order-1">1</div>
                    <div id="order-2">2</div>
                    <div id="order-3">3</div>
                    <div id="order-4">4</div>
                </div>
            </div>
            <!-- Should take up remaining horizontal space on the right side -->
            <div class="col" id="pattern-data">
                <div id="other-panel" class="column text-warning bg-dark rounded p-3 font-monospace overflow-x-auto" style="white-space: nowrap;">
                    <table id="patternView">
                        <tr id="pattern_1_header">
                          <td class="row-num-col fixed-col">Row</td>
                          <td class="tracker-col fixed-col">Ch 0</td>
                          <td class="tracker-col fixed-col">Ch 1</td>
                          <td class="tracker-col fixed-col">Ch 2</td>
                          <td class="tracker-col fixed-col">Ch 3</td>
                        </tr>
                        <tr id="pattern_1_row_0" class="">
                          <td class="row-num-col fixed-col">0</td>
                          <td class="tracker-col fixed-col">F-5</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">F-5</td>
                          <td class="tracker-col fixed-col">---</td>
                        </tr>
                        <tr id="pattern_1_row_1" class="">
                          <td class="row-num-col fixed-col">1</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">---</td>
                        </tr>
                        <tr id="pattern_1_row_2" class="">
                          <td class="row-num-col fixed-col">2</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">F-5</td>
                        </tr>
                        <tr id="pattern_1_row_3" class="">
                          <td class="row-num-col fixed-col">3</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">---</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>

Answer №2

To implement the desired layout, make sure to include the flex-nowrap class in the following line:

<div class="row flex-nowrap">
   <!-- This content should align to the left and have a small width -->

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

Tips for centering links in the navigation bar on Bootstrap 5 when viewing in a small size

I had previously inquired about customizing the Bootstrap 5 navbar in this post: Adjust navbar height to be smaller and I received some helpful answers. Thank you to everyone who responded. However, I now have a follow-up question: I am interested in ch ...

cssbootstrap-5

Is it possible for Angular to retrieve information from one JSON file but not another?

After updating the names in the code to reflect the current ones, I would greatly appreciate any help or suggestions! The json file has been provided, so there's not much additional setup required. Just a heads up: I haven't created a service fi ...

javascripthtmlangulartypescript

Stack the text on top of each other beside an image

Here is some HTML code that I am working with: <div class="row"> <div col-md-9> <div> <img class="img-valign" src="an image"> <span class="text1" Style="font-size: 8 ...

htmlcssbootstrap-4

Tips on keeping a div element in a fixed position until triggered by jQuery

I've managed to create a navigation bar within a header that sticks to the top of the screen once you scroll down past 100px. The functionality works well, but I'm looking to make the navigation bar stay fixed on the right until it snaps, essenti ...

javascriptjqueryhtmlcss

Bootstrap grid. Instead of moving to the next row, scroll horizontally when the content overflows

Here is the code snippet: <div class="row shochatgroup"> <div *ngFor="let message of messages" class="col-auto"> <button *ngIf="message.state.attributes.shochatpaid > 0 && message.state.at ...

csstwitter-bootstrapbootstrap-4

Is it possible to have a full-width thumbnail navigator in a full-width slider container with Jssor Slider?

I apologize if this topic has already been discussed, In a responsive full-width slider container, I am utilizing thumbnail navigator 03 with the scaling option disabled. Is it feasible to have a fixed-height, but fully (100%) width thumbnail navigator t ...

jqueryhtmlcssjssor

A guide on wrapping text within a Material-UI MenuItem

I am struggling to display text in a popover in multiple lines for UI reasons. I have tried updating the code but so far, I have not been successful. Any suggestions? <Popover anchorEl={target} open={open} anchorOrigin={{ horizontal: 'middle& ...

cssreactjsmaterial-ui

External CSS file unable to load background image as referenced

I am facing an issue with this code in my external CSS file as it doesn't seem to work at all. Strangely, when I move it internally, everything functions perfectly. Any thoughts on what could be causing this discrepancy? html { background-image:url(i ...

htmlcssrelative-path

When `focus` is bound to a jQuery event handler, the behavior of the select element becomes erratic on

What causes the odd behavior where users need to click twice on a select-option for it to drop down/up after binding an eventhandler to the focus event using jQuery? $('input, select, textarea').focus(function() { $(this).addClass('input_ ...

javascriptjqueryhtmlinternet-explorer

Navigation bar elements arranged in a row on mobile devices with HTML

This is the navigation bar for my website using Bootstrap 4: <!-- Bootstrap-4 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmY ...

htmlcssbootstrap-4

Create a full-width slider using Materialize CSS framework

When using materializecss to create a slider, I encountered an issue where the image is full width but not full height, causing scrollbars to appear. What changes can I make to ensure the slider fills out my screen without any scrollbars? Additionally, I ...

javascriptjqueryhtmlcssmaterialize

"An issue arises with jqPlot axes and legend when exporting images, as they are not rendering

After successfully rendering my jqPlot, I encountered an issue when exporting it as an image. The axes text and legend labels aren't displaying correctly in the exported image - the text seems to be shifting. Here's a comparison of the actual plo ...

jquerycssimagejqplot

Having trouble sending correct true/false values for selected radio buttons on an Angular5 table, often requiring users to click them twice to submit the appropriate values

My goal is to assign true or false values to selected radio buttons in each row and then form an object for submission. To distinguish between the radio button values in each row, I have used {{k}}+{{sizeobj.rbSelected}} as the value which is causing issue ...

htmltypescriptangular5

Accessing data in JSON format from a URL

I'm working on a website that analyzes data from the game Overwatch. There's this link () that, when visited, displays text in JSON format. Is there a way to use JavaScript to read this data and display it nicely within a <p> tag on my si ...

javascripthtmljson

Error message displayed on PHP web page

I'm working on a page that will display "no query string" if $_REQUEST is null, and if not, it will show a page with the content saying "query string". Additionally, it should output the line "The query string is: var_dump($_REQUEST)". I've writt ...

phphtmlweb-services

Toggle class to a div upon clicking menu item

Seeking assistance with jQuery to develop a video player featuring a sub menu for displaying various content options upon selection. Here is a snapshot of the frontend design: view image Upon clicking on 'video' or 'audio', a distinct ...

javascriptjqueryhtmlcss

Adjusting the height of a table column to accommodate lengthy text without disrupting the layout of adjacent columns

I am encountering an issue while creating an invoice using an HTML table. The problem arises when the customer address value is too long, causing the sold by column to shift downwards. I need a way to break the customer address value when it reaches the ma ...

htmlcss

The CSS styles are not immediately applied when the window is resized; they are only applied when scrolling

When utilizing the Angular approach to apply CSS, I noticed that changes are not applied when resizing the window. The canvas height adjusts correctly upon resize, but the table height only updates when we scroll the window. Is there a way to set the canva ...

cssangularjs

In my current project, I am developing a memory game using Ionic and Angular. The game involves displaying an ever-expanding list of numbers for the user to memorize, followed by the user typing

I am trying to make each number in an array appear and then disappear one by one. However, I have encountered an issue where only the last number shows up when there are multiple numbers in the array. I believe the problem lies within the for loop, but I h ...

htmlangularfor-loopionic-frameworkionic5

The bottom border of the HTML header does not properly wrap around the Table of Contents (ToC), although the text within the header does. What steps

I have created a Table of Content (ToC) using a Div element and styled it with the following HTML and CSS: h3.articletitle { font-weight: bold; font-size: 30px; border-bottom: 1px solid #4F120B; } h4.articlesubtitle { font-weight: bold; ...

htmlcss