How to create form with 2 columns inside lightning modal

Question

I have a button "Create New Opportunity". onclick of this button, a lightning modal popup opens with the set of around 16 input field tags to get the inputs from the user.I want this 16 input field tags to be displayed as 8 tags as one column and next 8 tags as another column.

I tried using and but it didn't work. Could anyone please let me know is there any other way to achieve this?

Answer 1

I would need to have more information and code example what you want to do but from your brief description I got that you want to basically create two columns in lightning component.

You need to use slds grid system:

<div class="slds-grid slds-wrap">
  <div class="slds-col slds-size_1-of-2">
    <lightning:input name="input1" label="Enter some text" />
  </div>
  <div class="slds-col slds-size_1-of-2">
    <lightning:input name="input1" label="Enter some text" />
  </div>
  <div class="slds-col slds-size_1-of-2">
    <lightning:input name="input1" label="Enter some text" />
  </div>
  <div class="slds-col slds-size_1-of-2">
    <lightning:input name="input1" label="Enter some text" />
  </div>
</div>

More resources and reference here: SLDS Grid Documentation

Answer 2

<div class="slds-grid slds-gutters">
        <div class="slds-col">
            <span>
                <div class="slds-form slds-form_stacked">
                    <!-- insert your field attributes here inside div class="slds-form-element" for those many fields you want to show in one column --> 
                    <div class="slds-form-element">
                        <label class="slds-form-element__label" for="form-element-01">Form Label</label>
                        <div class="slds-form-element__control">
                            <input type="text" id="form-element-01" class="slds-input" placeholder="Placeholder Text" />
                        </div>
                    </div>
                </div>
            </span>
        </div>
        <div class="slds-col">
            <span>
                <div class="slds-form slds-form_stacked">
                    <!-- insert your field attributes here inside div class="slds-form-element" for those many fields you want to show in one column --> 
                    <div class="slds-form-element">
                        <label class="slds-form-element__label" for="form-element-01">Form Label</label>
                        <div class="slds-form-element__control">
                            <input type="text" id="form-element-01" class="slds-input" placeholder="Placeholder Text" />
                        </div>
                    </div>
                </div>
            </span>
        </div>
    </div>

What you need is to insert your component(your field) inside div class="slds-form-element" .You can create more columns by adding:-

<div class="slds-col">
            <span>
            </span>
</div>

Hope it helps you. You can add more slds for better ui.