Bootstrap 4 - No Column Wrapping

Bootstrap 4 - keep columns with static width and no wrapping

Use the flex-nowrap class on the row..

<form class="row flex-nowrap"></form>

Bootstrap 4 - no column wrapping

col-xs-* class is not supported in bootstrap 4 .col-xs-* was used in bootstrap 3 So, Its replacement in bootstrap 4 is col-*.

So your class col-xs-4 is not going to work with bootstrap 4. So use col-4 instead.

Here is the code with your code.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /><div class="card card-outline-primary">  <div class="card-block">    <form class="row">      <div class="col-4" style="border:solid;border-color:red;border-width:5px;">        <label for="visualTheme" class="control-label">1234</label>        <div>          <input class="form-control" style="height:30px;" />        </div>      </div>      <div class="col-4" style="border:solid;border-color:blue;border-width:5px;">        <label class="control-label">5678</label>        <div>          <input class="form-control" style="height:30px;" />        </div>      </div>      <div class="col-4" style="border:solid;border-color:green;border-width:5px;">        <label class="control-label">abcd</label>        <div>          <input class="form-control" style="height:30px;" />        </div>      </div>    </form>  </div>

Disable column wrapping in Bootstrap 4

Normally the flex-nowrap class can be used on the row to prevent col wrapping in Bootstrap 4. In this case that won't work because of the wide, ellipsis content in the column.

Due to the way flexbox width is calculated (explained here and here), you should set a width, min-width, or max-width (any width) on the flex-grow:1 column (col).

For example, 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;
}

https://codeply.com/go/JKLUD0NLn4

Also, don't use both col and col-auto on the same column. The flex-grow:1 of col, will prevent the col-auto from shrinking.

prevent wrapping/stacking of columns in bootstrap when shrinking the size?

I think you need to replace col-md-8 with col-xs-8 and col-md-4 with col-xs-4

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!DOCTYPE html><html>
<head>  <title></title>  <meta charset="utf-8">  <meta class="viewport" content="width=device-width, initial-scale=1">  <!-- Latest compiled and minified CSS -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Optional theme -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script></head><style>  #outside-container {    border: 2px solid red;    height: 500px;    white-space: nowrap;  }  #container1 {    border: 2px solid green;    height: 300px;  }  #colmd8 {    border: 2px solid yellow;    height: 400px;  }  #row1 {    border: 2px solid pink;  }  #list1 {    border: 2px solid red;    width: 200px;    height: 200px;  }  #container2 {    border: 2px solid navy;    height: 300px;  }  li {    display: inline-block;  }  ul {    white-space: nowrap;  }  #col4 {    border: 2px groove darksalmon;  }</style>
<body>
  <div class="container-fluid" id="outside-container">    <div class="col-xs-8" id="colmd8">colmd8      <div class="container-fluid" id="container1">container1        <div class="row" id="row1">row1          <ul class="col-md-12 list-inline" id="colmd3" style="list-style: none">            <li id="list1">              <a href="#"></a>            </li>            <li id="list1">              <a href="#"></a>            </li>            <li id="list1">              <a href="#"></a>            </li>            <li id="list1">              <a href="#"></a>            </li>
          </ul>        </div>      </div>
    </div>    <div class="col-xs-4" id="col4">colmd4      <div class="container-fluid" id="container2">container2

      </div>    </div>  </div>
</body>
</html>

Bootstrap 4 columns without wrap - use least or most amount of space

You can use col-auto on the 2nd column so it uses the least amount of space

https://www.codeply.com/go/NR35sANtRT

<div class="row border">
        <div class="col border text-truncate">
            <small class="text-muted">{trans.payee} - {trans.category} can be longer</small>
        </div>
        <div class="col-auto text-right">
            <small class="text-muted">40.00</small>
        </div>
</div>

You can also add text-truncate to prevent the 1st column from wrapping if needed.

Prevent Bootstrap 4 auto-fill column from wrapping to next row

When a flex item contains child elements with text that should be truncated, layout can be broken.

My first solution is add min-width: 0 to problem-div's parent (take a look at css trick article: https://css-tricks.com/flexbox-truncated-text/):

img {  width: 16px;  height: 16px;}
label {  margin: 0;  font-weight: 600;}
.form-text {  margin: 0;}
#problem-div {  background-color: #e0FFFF;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<body class="container-fluid">
  ...  <!-- lots of stuff -->
  <div class="card">    <div class="card-header bg-warning">      <div class="row">        <div class="col-auto text-nowrap">          <img src=".../icon.png" />          <h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>        </div>        <div class="col row small">          <div class="form-group col-3">            <label>ID</label>            <span class="form-text">1234567</span>          </div>          <div class="form-group col-3">            <label>Name</label>            <span class="form-text">My Name</span>          </div>          <div class="form-group col-3">            <label>Type</label>            <span class="form-text">Category-A</span>          </div>          <div class="form-group col-3">            <label>Code</label>            <span class="form-text">ABCDEFG</span>          </div>        </div>      </div>    </div>    <div class="card-body">      <div class="row">        <div class="col-auto text-nowrap invisible"> <img src=".../icon.png" />          <h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>        </div>        <div class="col small" style="min-width: 0">          <!-- Problem Div, breaks the auto-fill feature of its parent when "text-truncate" class is applied. -->          <div id="problem-div" class="text-truncate">            <label>Display Field Label</label>            <span class="form-text">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.</span>          </div>        </div>      </div>    </div>  </div>  ...  <!-- more stuff -->
</body>

grid columns wrap after upgrading to bootstrap 4

The way I got it to work in the end was to add another set of row and col classes like this...

   <div id="myDynamicList" style="display:none;" class="row">
      <div class="col-sm-12">
          <div class="row">
             <div class="col-sm-4 tabledHeader">Service Id</div>
             <div class="col-sm-4 tabledHeader">Service Type</div>
             <div class="col-sm-1 tabledHeader">Synchronised</div>
             <div class="col-sm-1 tabledHeader">Singleton</div>
             <div class="col-sm-2 tabledHeader"></div>
           </div>
      </div>
   </div>
   <div class="row" id="listBody">
      <div class="col-sm-12" id="myListOutput"></div>
   </div>