Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 4 - keep columns with static width and no wrapping [duplicate]

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.

like image 448
Mark Avatar asked Apr 19 '17 20:04

Mark


People also ask

What does Col MD 12 mean?

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)...

Which layout in Bootstrap will provide 100% width?

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).

What is Col lg 2?

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.

What is XS SM MD lg in Bootstrap?

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.


1 Answers

Use the flex-nowrap class on the row..

<form class="row flex-nowrap"></form>
like image 163
Zim Avatar answered Sep 20 '22 09:09

Zim