Form Inline Horizontal to Vertical

Bootstrap Studio Help
1

Hi folks, https://embed.plnkr.co/gaRtenHnDngVGFpgRO0E/

Try to resize your browser. I do not want like this....

enter image description here

Any Idea? I am waiting for your response. Thanks in Advance

2

I'm going to assume that your wanting your form element and the paragraph to all be on 1 line.

Ok, well first off for things to truly work correctly the form elements should be in a FORM element. And then most likely each one should be in a <div class="form-group"> it helps with styling/spacing etc...

Now are you not wanting the form to collapse at all? Are you wanting the paragraph to collapse under the form at some point?

One of the issues is that your initial columns col-sm-4 and col-sm-8 are what's causing the collapsing, col-sm-4 is to narrow I switched to 6 for both. However, I'm thinking this code below is something your more looking for?

<div class="row" style="font-size: 12px;">
    <div class="col-lg-5 col-md-6">
        <*form class="form-inline">
        <div class="form-group" style="display: inline-block;">
            <label>Number </label>
            <select style="width:auto;display: inline-block;" class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            </select>
        </div>

        <div class="form-group" style="display: inline-block;">
            <label class="sr-only" style="font-size:1em;">*should always have a label referencing the select element* </label>
            <select style="width:auto;display: inline-block;" class="form-control">
            <option>aa</option>
            <option>bb</option>
            <option>cc</option>
            </select>
        </div>

        <div class="form-group" style="display: inline-block;">
            <label class="sr-only" style="font-size:1em;">*should always have a label referencing the select element* </label>
            <select style="width:auto;display: inline-block;" class="form-control">
            <option>aabbccyygg</option>
            <option>bbeeggttdd</option>
            <option>cchhuujjss</option>
            </select>
        </div>

        <div class="form-group" style="display: inline-block;">
            <label style="font-size:1em;">Shape </label>
            <select style="width:auto;display: inline-block;" class="form-control">
            <option>abc</option>
            <option>xyz</option>
            <option>pol</option>
            </select>
        </div>
        <div class="form-group" style="display: inline-block;">
            <button type="button" class="btn btn-xs btn-primary" style="margin-top: 4px;">
            Add &gt;
            </button>
        </div>
        <*/form>
    </div>
    <div class="col-lg-7 col-md-6" style="background-color:cadetblue">
        <*p>This is Paragraph</p>
    </div>
</div>

The above code does what I was asking about. Tried to keep the form inline all the way down but not including mobile. For it to work like this the paragraph section has to collapse at some point or it will be really narrow. So when it reach tablet size the paragraph collapses under the form so that the form can stay inline and the paragraph section doesn't get to narrow.

Saj

3

Many thanks