Menu
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.
448
col-md- stands for column medium ≥ 992px. col-xs- stands for column extra small ≥ 768px. The pixel numbers are the breakpoints, so for example col-xs is targeting the element when the window is smaller than 768px(likely mobile devices)...
Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it's 100% wide all the time).
col-lg-2: This class is used when the device size is large or greater than 992px and the maximum width of container is 960px and when you want size equal to 2 columns.
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Use the flex-nowrap class on the row..
<form class="row flex-nowrap"></form>
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
