Steps to align a column inline using Bootstrap 4's auto feature

I'm trying to inline a column icon with a responsive column table, but the second column keeps breaking to a new line. I've already applied a responsive table that should scroll horizontally if it exceeds the parent width, but the issue persists. To troubleshoot this quickly, I have added a comment for reference.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <!-- Variable column for dependent content -->
    <div class="col-auto">
      <span>Iconaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
    </div>
    <!-- Automatically fill left column -->
    <div class="col">
      <div class="table-responsive">
        <table class="table table-sm table-bordered table-striped table-primary">
          <thead>
            <tr>
              <th width="1%">No</th>
              <th width="7%">Pengirim</th>
              <th>Pesan</th>
              <th>Tanggal</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>1</th>
              <td>0123456789012</td>
              <td>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</td>
              <td>@mdo</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

htmlcssbootstrap-4

Answer №1

To ensure the element stays on the same line, you can apply flex-nowrap. Additionally, consider adding min-width:0 to the column containing the table.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row flex-nowrap">
    <!-- Variable column dependent content -->
    <div class="col-auto">
      <span>Iconaaaaaaaaaaaa</span>
    </div>
    <!-- Column that fills remaining space -->
    <div class="col" style="min-width:0;">
      <div class="table-responsive">
        <table class="table table-sm table-bordered table-striped table-primary">
          <thead>
            <tr>
              <th width="1%">No</th>
              <th width="7%">Pengirim</th>
              <th>Pesan</th>
              <th>Tanggal</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>1</th>
              <td>0123456789012</td>
              <td>111111111111...</td>
              <td>@mdo</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Alternatively, you can use overflow-auto instead of flex-nowrap to achieve the same result while sticking to Bootstrap classes:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row flex-nowrap">
    <!-- Variable column dependent content -->
    <div class="col-auto">
      <span>Iconaaaaaaaaaaaa</span>
    </div>
    <!-- Column with overflow scroll enabled -->
    <div class="col overflow-auto" >
      <div class="table-responsive">
        <table class="table table-sm table-bordered table-striped table-primary">
          <thead>
            <tr>
              <th width="1%">No</th>
              <th width="7%">Pengirim</th>
              <th>Pesan</th>
              <th>Tanggal</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>1</th>
              <td>0123456789012</td>
              <td>111111111111...</td>
              <td>@mdo</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

For more information, refer to this post on Stack Overflow: Why don't flex items shrink past content size?

Answer №2

Remember to make use of the CSS property word-break: break-word;

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row flex-nowrap">
    <!-- Adjust for col-dependent content -->
    <div class="col-auto">
      <span>Iconaaaaaaaaaaaa</span>
    </div>
    <!-- Fill left column automatically -->
    <div class="col" style="min-width:0;word-break: break-word;">
      <div class="table-responsive">
        <table class="table table-sm table-bordered table-striped table-primary">
          <thead>
            <tr>
              <th width="1%">No</th>
              <th width="7%">Sender</th>
              <th>Message</th>
              <th>Date</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>1</th>
              <td>0123456789012</td>
              <td>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</td>
              <td>@mdo</td>
            </tr>
             <tr>
              <th>2</th>
              <td>9876543210321</td>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</td>
              <td>@mdo</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

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

When I have a lengthy description, the alignment of the CSS DIV prices becomes misaligned

When I have a long description, the prices appear misaligned. You can take a look at it here: https://i.sstatic.net/aXgaj.jpg For the JSFiddle example, visit: https://jsfiddle.net/2n19tv75/ .border-gray { border: 1px solid #e5e7eb; float: left; w ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

Issue: Please avoid using HTML tag <img>. Instead, utilize the Image component from 'next/image' - Next.js when working with styled components

While working with Next.js, I encountered an issue with the Image component. Unlike a regular HTML tag, the Image component requires a layout and doesn't offer the same level of control. Additionally, I found that it couldn't be used with framer ...

javascripthtmlnext.jseslintnextjs-image

Why must we always begin rotating with 0 in CSS Animation's webkit transform rotate?

Can anyone assist me with this issue? I have created a jsfiddle with an example. In summary, I am trying to rotate an "orange dart" in a circle every time the user clicks on a link. The rotation works fine, but the problem is that the "orange dart" always ...

javascriptjquerycssrotationcss-animations

Implementing a video background within a dynamic two-column layout, accompanied by text within a separate column

While viewing on a large screen with Bootstrap 5, everything looks good: https://i.sstatic.net/Vm6bH.png However, when I resize the screen, the text in the first column overflows onto the sections below instead of adjusting properly. https://i.sstatic.n ...

cssbootstrap-5

Leveraging image values for selecting an image from a collection and showcasing it (Javascript)

I have a collection of images that I want to enlarge upon clicking. Here is what I currently have: <div class="gallery"> <div> <img src="content/imggallery/img1.jpg" class="oldimg" value="0"> </div> ...

javascriptjqueryhtmlimage

Creating a right-aligned glyph within a Panel header using Bootstrap

I am currently designing a Panel using bootstrap and I would like to include a glyph in the heading, aligned to the right. I tried adding "text-right" to the span tag but unfortunately, it didn't work as expected. Here is the code snippet: < ...

htmlcsstwitter-bootstrap

Position the mat-icon button in the top right corner for the close button

I'm struggling with positioning my close icon button at the top right corner of my dialog box. Here is my app-iconbutton component: <button mat-icon-button class="iconbutton" [ngStyle]="{ 'background-color': back ...

cssangularangular-materialangular13

Creating dynamic tables with jquery mobile

When the screen width decreases, I need to find a way to position 3 tables below each other without using float or breaking the jquery mobile layout. Using float: left; on the surrounding containers of each table is not an option as it disrupts the jquery ...

jqueryhtmlcssjquery-mobileresponsive-design

What's the most effective way to design a dynamic, dual-color diagonal backdrop that is responsive?

I'm currently attempting to design a responsive, two-toned diagonal background similar to the one shown. I've experimented with linear gradients, but unfortunately, the diagonal line appears too rough. Additionally, using transform skew presented ...

csssvg

Having trouble retrieving text from an HTML form in Node.js using express, as the req.body object is coming up

Having trouble extracting text from an HTML form to build a basic text to speech functionality. Despite using an express server, the req.body is consistently empty when attempting to fetch the text. I've experimented with body-parser and adjusted the ...

javascripthtmlnode.jsexpress

The Power of Jquery's load() Function for Loading Text

Is there a way to show the content of file.txt along with any text on the <title id="mytitle"></title> tag? $(window).on('load', function() { $("#mytitle").load("/file.txt"); }); The content of file ...

htmljqueryajaxfunctionload

Retrieve the video URL from Facebook within a WebView

Is there a way to download videos from Facebook using the video URL obtained from a Webview? I have attempted different methods to achieve this without success. 1.Link 1 2.Link 2 I tried extracting the video tag from the HTML in the Webview, however, cl ...

androidhtmlfacebookvideowebview

the spillage exhibits only a thin streak of gray

My website is primarily a Single Page Website, however, there are specific pages that can only be accessed by registered users. On the website, there is a section referred to as a "block" where you will find a button labeled "Login / Register". Upon clicki ...

javascriptjqueryhtmlcssoverflow

Adjust the jQuery.ScrollTo plugin to smoothly scroll an element to the middle of the page both vertically and horizontally, or towards the center as much as possible

Visit this link for more information Have you noticed that when scrolling to an element positioned to the left of your current scroll position, only half of the element is visible? It would be ideal if the entire element could be visible and even centere ...

javascriptjqueryhtmlcss

Having issues with jQuery append() function not working when concatenating strings

(See complete code below) This specific part of the code $('#' + id).parent().append('<div id="pop-up">hello</div>'); functions correctly. However, when I attempt to use this alternative approach $('#' + id).p ...

jqueryhtmlappendstring-concatenation

Tips for choosing a specific cell in a table

I currently have a total of 14 cells that have been generated. Is there a way for me to individually select and manipulate a specific cell out of the 14? I am looking to make only one cell unique, while leaving the rest to be displayed as they are in the ...

javascripthtmlcss

Completely shrink the middle row first when resizing the browser before shrinking the other rows

Utilizing a simple three row structure: <div class="EditorHeaderWrapper"> <h1>Title</h1> </div> <div class="EditorMainRowWrapper"> // Content of the main row goes here </div> <div class="EditorFooterWrapper"> ...

htmlcss

Using CSS to align horizontally the legend of keys and values

I'm currently working on designing a horizontal legend using html/css. The design consists of colored boxes with text beside them, followed by some spacing, then another colored box with more text, and repeating in this pattern. [blue] - LabelA [g ...

htmlcss

Static checks do not apply to CSS variables

Our webtech class assignment is to create a static webpage that meets the criteria of the jigsaw w3c css validator. We've encountered a roadblock while trying to resolve the final warning message: Due to their dynamic nature, CSS variables are curre ...

css

Sliding a division using Jquery from the edges of the browser's window

<script> $(function(){ $('#right_image1').hide().delay('10000').fadeIn('5000').animate({right: '0'}, 5000); $('#left_image1').hide().delay('10000').fadeIn('5000').a ...

javascriptjquerycsshtml