Search code examples
htmlcssbootstrap-4flexboxcss-grid

Bootstrap side by side column with dynamic width

I have a two column box in bootstrap. Both columns expected to be having dynamic content. The second column should be adjacent to the first one. And if the columns width are exceeding the total width of the outer div, the first column should only take the remaining space. Please see the screen shot attached for better clarification.

Expected output

enter image description here

I am using bootstrap 4.6.1 framework in the project. I tried with various method including CSS3 flex, grid etc. This is my code for now,

<div class="container-fluid">
  <div class="row">
    <div class="col-auto box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div class="col-auto box">Lorem Ipsum</div>
  </div>
  <br/><br/>
  <div class="row">
    <div class="col-auto box">
        <div class="inner">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae distinctio molestias nulla, voluptatum ut nesciunt, in. Deserunt optio inventore animi officia alias cumque incidunt! Alias impedit dolores velit recusandae blanditiis!

        </div>
      </div>
    <div class="col-auto box">Lorem Ipsum dolor sit, consectetur adipisicing elit</div>
  </div>
</div>

This is the link to the jsfiddle

But couldn't find a solution. Can any one please help me?

Solution

  • You could add the class flex-nowrap to your rows :

    .box {
  border: 1px solid red;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 15px;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row flex-nowrap">
    <div class="truncate box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae distinctio molestias nulla, voluptatum ut nesciunt, in. Deserunt optio inventore animi officia alias cumque incidunt! Alias impedit dolores velit recusandae blanditiis!</div>
    <div class="col-auto box">Lorem Ipsum dolor sit, consectetur adipisicing elit</div>
  </div>
  <br />
  <div class="row flex-nowrap">
    <div class="truncate box">Lorem ipsum dolor sit amet</div>
    <div class="col-auto box">Lorem Ipsum dolor sit, consectetur adipisicing elit</div>
  </div>
</div>