html - Bootstrap grid breaks in smallest size

Question

Using this code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">

    <label class="col-2 col-form-label">Email</label>

    <div class="col-8">
      <input type="text" class="form-control">
    </div>

    <div class="col-2">
      text
    </div>

  </div>
 </div>

Answer 1

The columns can't shrink in width less than 30px (due to padding) so, as screen width narrows, eventually the columns wrap (stack vertically). To prevent this, adjust the padding on the columns inside the row. Bootstrap 4 has a no-gutters class for this purpose...

https://codeply.com/go/XaBsD5AhJG

<div class="container">
    <div class="row no-gutters">
        <label class="col-2 col-form-label">Email</label>
        <div class="col-8">
            <input type="text" class="form-control">
        </div>
        <div class="col-2 pl-1">
            text
        </div>
    </div>
</div>

Bootstrap 4 also has padding utility classes classes that can be used to adjust padding on individual elements. For example, I used pl-1(padding-left) on the last column to give a little space between the input and "text". Another Bootstrap 4 option is to use flex-nowrap on the row which will prevent wrapping and creating horizontal scrolling when there is overflow.

In Bootstrap 3, you need to add CSS to adjust the padding.

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}
.no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

---

Related
Bootstrap col-xs wrapping
Bootstrap xs columns wrap