7

I need to to prevent B4 columns from wrapping when resizing the Browser. Here is my code:

<div class="card card-outline-primary">
<div class="card-block">
    <form class="row">
        <div class="col-xs-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-xs-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-xs-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>

Fiddle

But it still wraps when I make it smaller.

Thanks for the help.

Mark
  • 4,535
  • 7
  • 39
  • 76

2 Answers2

19

The accepted answer doesn't provide a solution to the posters question.

Bootstrap 4 .rows are flex containers and the .col's in the row are the flex items. There are a bunch of utility classes that they provide to control the flex containers and items.

To prevent the columns in your row from stacking add the .flex-nowrap class to your row:

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

Reference: Bootstrap 4 - Flex Doc's

Drew
  • 4,215
  • 3
  • 26
  • 40
  • Dear Sir, in that year(2017) bootstrap did not introduced flexbox approach yet, so in those days we uses custom code :) – Sahil Dhir Jul 05 '23 at 05:13
6

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>
Sahil Dhir
  • 4,162
  • 1
  • 13
  • 33
  • I see. Yes, it's not wrapping columns anymore. But the columns get less width when I resize horizontally. That's not what I want. I want a horizontal bar instead. Any idea? – Mark Apr 20 '17 at 11:11
  • are you talking about the space left and right ,space inside the columns? – Sahil Dhir Apr 20 '17 at 11:36
  • Space inside of the columns, another words their width. Is it possible to keep it unchanged when making Browser smaller? – Mark Apr 20 '17 at 11:38
  • actually its not possible as this is how responsive design work.. If you want to fix there size that will be a custom code.. – Sahil Dhir Apr 20 '17 at 11:39
  • I think specifying a min width for columns should help. Is there a way of overriding B4 columns globally? – Mark Apr 20 '17 at 11:44
  • you can download a custom css from bootstrap 4 according to your requirement. http://getbootstrap.com/customize/ – Sahil Dhir Apr 20 '17 at 11:46
  • No, I meant inside of my application without changing B4 base classes. – Mark Apr 20 '17 at 11:48