Bootstrap 4 - keep columns with static width and no wrapping
12,549
Use the flex-nowrap
class on the row..
<form class="row flex-nowrap"></form>
Author by
Mark
Updated on June 13, 2022Comments
-
Mark almost 2 years
I am trying to get this layout working: Columns keep constant width when I resize the browser and they dont wrap - instead a horizontal scroll bar appears as soon as it reaches the min width. My code:
<div class="card card-outline-primary" style="min-width:500px"> <div class="card-block container-fixed"> <form class="row"> <div class="col-4" style="border:solid;border-color:red;border-width:5px;min-width:250px"> <label for="visualTheme" class="control-label">1234</label> <div> <input class="form-control" style="height:30px;width:200px" id="visualTheme" /> </div> </div> <div class="col-4" style="border:solid;border-color:blue;border-width:5px;min-width:250px"> <label class="control-label">5678</label> <div> <input class="form-control" style="height:30px;width:200px" id="startingScreen" /> </div> </div> <div class="col-4" style="border:solid;border-color:green;border-width:5px;min-width:250px"> </div> </form> </div>
And Fiddle: Fiddle
If I use min width for columns they wrap.
Thanks for the help.