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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With