Taming col-auto in Bootstrap to prevent it from being overly insatiable

Question

Taming col-auto in Bootstrap to prevent it from being overly insatiable

In this simplistic example below, I have implemented two columns using the col-auto class, allowing each column to take up the necessary space.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">


<div class="container-fluid w-100">
  <div class="row flex-nowrap">
    <div class="col-auto">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </div>
    <div class="col-auto">
      2 of 2
    </div>
  </div> 
</div>

OUTPUT: https://i.sstatic.net/UjfIz.png

The issue arises when the first column extends beyond the viewport and overlaps the second column. Is there an elegant solution to ensure each column can expand to fit available space without dominating the layout? Ideally, the solution should include a scrollbar for content overflow and maintain a small size for the second column displaying '2 of 2'.

Please note that I prefer the columns to be aligned next to each other rather than wrapping to the next line.

css bootstrap-5 bootstrap-grid

Answer 1

Answer №1

For the first column:

Include the class text-break
Swap out col-auto with col

Check out Bootstrap text-break Documentation

Distinguishing features of Bootstrap col and col-auto:

.col{
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}
.col-auto{
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

DEMO:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
  overflow: auto;
}

.col > img{
  max-width:100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<h1> With or Without text-break</h1>
<h2> Flexbox with text-break </h2>

<div class="container-fluid w-100">
  <div class="row flex-nowrap">
    <div class="col text-break">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </div>
    <div class="col-auto">
      2 of 2
    </div>
  </div> 
</div>


<h2> Flexbox without text-break </h2>
<div class="container-fluid w-100">
  <div class="row flex-nowrap">
    <div class="col">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum doloreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </div>
    <div class="col-auto">
      2 of 2
    </div>
  </div> 
</div>

<h2>With image</h2>

<div class="container-fluid w-100">
  <div class="row flex-nowrap">
    <div class="col">
    <img src="https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_1200x675_crop_center-center_82_line/image_optimzation.jpg.webp">
<!--       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum doloreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." -->
    </div>
    <div class="col-auto">
      2 of 2
    </div>
  </div> 
</div>

Answer 2

For the first column:

Include the class text-break
Swap out col-auto with col

Check out Bootstrap text-break Documentation

Distinguishing features of Bootstrap col and col-auto:

.col{
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}
.col-auto{
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

DEMO:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
  overflow: auto;
}

.col > img{
  max-width:100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<h1> With or Without text-break</h1>
<h2> Flexbox with text-break </h2>

<div class="container-fluid w-100">
  <div class="row flex-nowrap">
    <div class="col text-break">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </div>
    <div class="col-auto">
      2 of 2
    </div>
  </div> 
</div>


<h2> Flexbox without text-break </h2>
<div class="container-fluid w-100">
  <div class="row flex-nowrap">
    <div class="col">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum doloreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </div>
    <div class="col-auto">
      2 of 2
    </div>
  </div> 
</div>

<h2>With image</h2>

<div class="container-fluid w-100">
  <div class="row flex-nowrap">
    <div class="col">
    <img src="https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_1200x675_crop_center-center_82_line/image_optimzation.jpg.webp">
<!--       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum doloreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." -->
    </div>
    <div class="col-auto">
      2 of 2
    </div>
  </div> 
</div>

Answer 3

Answer №2

Maybe you could experiment with the row-cols class as a potential solution. By using this class, you can easily set up columns within a parent Row without needing any custom CSS. For example, the row-cols-2 class automatically arranges the columns into 2 side-by-side, followed by the next 2 stacked below.

 <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>

Answer 4

Maybe you could experiment with the row-cols class as a potential solution. By using this class, you can easily set up columns within a parent Row without needing any custom CSS. For example, the row-cols-2 class automatically arranges the columns into 2 side-by-side, followed by the next 2 stacked below.

 <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>

Taming col-auto in Bootstrap to prevent it from being overly insatiable

Answer №1

Answer №2

Similar questions

Apply pointer style to the CSS only when a division contains text

implementing a sidebar menu using AngularJS

Why are the random colors blending into the image?

The hover drop-down menu in CSS is not appearing in the correct position

"Enhance your website with a dual-column layout using jQuery for

Adjusting the Size and Spacing of Vuetify's Buttons

The color of hyperlinks in firefox varies based on the specific URL being visited

Having trouble with the image resizing in Bootstrap 5 on Safari?

Is it the right time to dive into HTML5 & CSS3?

Attempting to bind an input parameter using NgStyle in Angular version 2 and above

Issue with loading background image in HTML/CSS is being caused by a Cross-Origin Read Blocking problem

Using SVG files as properties in React from a data.js file

Adjusting the amount of rows and columns in a fluid manner with CSS grid (updated)

Place a vertical slider adjacent to an HTML element on either the left or right side

Uniform widths of table cells when resizing and overflowing

How come my countdown application functions properly when accessed through the browser via the HTML page, but encounters issues when utilized with an HTTP server?

The outline none property on the Material UI IconButton is malfunctioning

Having trouble with Jquery CSS transform not functioning properly in Internet Explorer 8?

If a second instance is hidden, SVG will appear as a mysterious black box

Turn off the ability to drag on an HTML page