8

I got a complex web form that has many fields in a single line. Bootstrap inline form worked great on larger screens. However, the requirement is to make the page responsive so that the inline form will transform into a 3-column grid layout on smaller screens such as tablets and phones.

Inline form on large screen:

enter image description here

Required layout on mobile screen

enter image description here

Is it possible? This is for Bootstrap 3.

Any tips are greatly appreciated!

Code Snippet:

<div class="container">

<form class="form-horizontal" data-toggle="validator" role="form" action="" method="post" id="form1">


    <fieldset style="background-color:#F7F7F7">

        <div class="row">
          <div class="form-inline" style="text-align:left">

            <div class="form-group"   style="margin-right:30px;">
                <div class="floating-label-form-group" style="top:-5px;width:180px">
                    <label class="control-label" for="Selection1">Selection1</label>
                    <select id="Selection1" name="Selection1" class="form-control relationship selectpicker" required>
                        <option value="" disabled selected>Selection1 *</option>
                        <option value="1">option 1</option>
                        <option value="2">option 2/option>
                        <option value="3">option 3</option>
                    </select>
                </div>
                <span class="help-block with-errors"></span>
            </div>

            <div class="form-group ">
                <div class="floating-label-form-group">
                    <label class="control-label" for="fName">1st Name</label>  
                    <input id="fName" name="fName" type="text" required>
                </div>
                <span class="help-block with-errors"></span>
            </div>
            <div class="form-group "  style="margin-right:30px">
                <div class="floating-label-form-group">
                    <label class="control-label" for="lName">Last Name</label>  
                    <input id="lName" name="lName" type="text" required>
                </div>
                <span class="help-block with-errors"></span>
            </div>

            <div class="form-group">
                <div class="floating-label-form-group" style="top:-5px;width:120px">
                    <label class="control-label" for="gender">Gender</label>
                    <select id="gender" name="gender" class="form-control selectpicker" required>
                        <option value="" disabled selected>gender *</option>
                        <option value="1">M</option>
                        <option value="2">F</option>
                    </select>
                </div>
                <span class="help-block with-errors"></span>
            </div>

            <div class="form-group">
                <div class="floating-label-form-group" style="top:-5px;width:160px">
                    <label class="control-label" for="selection2">Selection2</label>
                    <select id="selection2" name="selection2" class="form-control selectpicker" required>
                        <option value="" disabled selected>Selection2 *</option>
                        <option value="1">option 1</option>
                        <option value="2">option 2</option>
                    </select>
                </div>
                <span class="help-block with-errors"></span>
            </div>

          </div>
        </div><!-- /row -->

    </fieldset>
</form>

5
  • I did try everything. SO's always been the last resort. I'm not asking for someone to code for me, for the record. I'm sure some other people probably face similar situation. If @Paulie_D cannot provide any tips regarding how to solve the problem, don't come back and just down vote.
    – devXen
    Apr 27, 2016 at 15:00
  • Only trying to show the inline form layout for the top screenshot, hence I purposely blurred the text. My apology if one finds it's confusing. Should've used whiteout. Must one give code snippet to comprehend the question?
    – devXen
    Apr 27, 2016 at 15:08
  • Same result...we don't know what elements are what, and how the they are supposed to be positioned before/after. That's why we ask you to demo this WITH CODE...so we can see what's happening when you make the changes.
    – Paulie_D
    Apr 27, 2016 at 15:15
  • Code Snippet added. Thank you. The screenshot will be edited to reflect the code.
    – devXen
    Apr 27, 2016 at 15:16
  • Can you share your CSS? You're using some custom classes. May 17, 2016 at 15:52

3 Answers 3

3
+50

I modified some of your HTML markup, removed some inline styles and added some classes.

Here's what you're looking for:

.myform {
  margin-top: 10px;
}
.myform fieldset {
  padding: 10px 20px;
  background-color: #F7F7F7;
}
.myform .form-group {
  display: block;
}
.myform input,
.myform select {
  min-width: 100%;
  border-radius: 0;
}
.myform .double-input {
  margin: 0;
}
.myform .double-input div[class^='col-'],
.myform .double-input div[class*=' col-'] {
  padding-left: 0;
}
.myform .double-input:first-child div[class^='col-'],
.myform .double-input:first-child div[class*=' col-'] {
  padding: 0;
}
@media (min-width: 992px) {
  .control-label {
    text-align: left;
    display: block;
  }
  .myform .double-input:first-child div[class^='col-'],
  .myform .double-input:first-child div[class*=' col-'] {
    padding-right: 3px;
  }
}
@media (max-width: 992px) {
  .myform input,
  .myform select {
    border-top: 0;
    border-right: 0;
    border-left: 0;
  }
  #fName {
    border-right: 1px solid #ccc;
  }
  #gender {
    border-right: 1px solid #ccc;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <form class="myform" data-toggle="validator" role="form" action="" method="post" id="form1">


    <fieldset>

      <div class="row">
        <div class="col-md-2">
          <div class="form-group">
            <div class="floating-label-form-group">
              <label class="control-label" for="Selection1">Selection1</label>
              <select id="Selection1" name="Selection1" class="form-control relationship selectpicker" required>
                <option value="" disabled selected>Selection1 *</option>
                <option value="1">option 1</option>
                <option value="2">option 2/option>
                  <option value="3">option 3</option>
              </select>
            </div>
            <span class="help-block with-errors"></span>
          </div>
        </div>
        <div class="col-md-5">
          <div class="row double-input">
            <div class="col-xs-6">
              <div class="form-group">
                <div class="floating-label-form-group">
                  <label class="control-label" for="fName">1st Name</label>
                  <input id="fName" class="form-control" name="fName" type="text" required>
                </div>
                <span class="help-block with-errors"></span>
              </div>
            </div>
            <div class="col-xs-6">
              <div class="form-group ">
                <div class="floating-label-form-group">
                  <label class="control-label" for="lName">Last Name</label>
                  <input id="lName" class="form-control" name="lName" type="text" required>
                </div>
                <span class="help-block with-errors"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-5">
          <div class="row double-input">
            <div class="col-xs-6">
              <div class="form-group">
                <div class="floating-label-form-group">
                  <label class="control-label" for="gender">Gender</label>
                  <select id="gender" name="gender" class="form-control selectpicker" required>
                    <option value="" disabled selected>gender *</option>
                    <option value="1">M</option>
                    <option value="2">F</option>
                  </select>
                </div>
                <span class="help-block with-errors"></span>
              </div>
            </div>
            <div class="col-xs-6">
              <div class="form-group">
                <div class="floating-label-form-group">
                  <label class="control-label" for="selection2">Selection2</label>
                  <select id="selection2" name="selection2" class="form-control selectpicker" required>
                    <option value="" disabled selected>Selection2 *</option>
                    <option value="1">option 1</option>
                    <option value="2">option 2</option>
                  </select>
                </div>
                <span class="help-block with-errors"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /row -->
    </fieldset>
  </form>

1

Try this. using col-md-push-* and col-md-pull-*

updated JSFIDDLE

here used the class form-inline before form-group class and style

.form-inline .form-control {    
    width: 100%;   
}
.nopadding {
   padding: 0px 2px 0px 0px !important;
   margin: 0px !important;
}
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="form-inline">
 <div class="form-group">
             <div class="row">
             <div class="col-md-4 col-md-push-8">
                     <div class="col-xs-6 nopadding">
                     <label class="control-label" for="lName">Gender</label>  
                    <select id="gender" name="gender" class="form-control selectpicker" required>
                        <option value="" disabled selected>gender *</option>
                        <option value="1">M</option>
                        <option value="2">F</option>
                    </select>
                    </div>
                
                <div class="col-xs-6 nopadding">
                    <label class="control-label" for="selection2">Selection2</label>
                    <select id="selection2" name="selection2" class="form-control selectpicker" required>
                        <option value="" disabled selected>Selection2 *</option>
                        <option value="1">option 1</option>
                        <option value="2">option 2</option>
                    </select>
                    </div></div>
                     <div class="col-md-4">
                <div class="col-xs-6 nopadding">
                    <div class="floating-label-form-group">
                    <label class="control-label" for="fName">1st Name</label>  
                    <input class="form-control" id="fName" name="fName" type="text" required>
                </div>
                </div>
                <div class="col-xs-6 nopadding">
                    
                    <label class="control-label" for="lName">Last Name</label>  
                    <input class="form-control" id="lName" name="lName" type="text" required>
                    </div></div>
  <div class="col-md-4 col-md-pull-8">
                <div class="col-xs-12 nopadding">
                    <label class="control-label" for="Selection1">Selection1</label>
                    <select id="Selection1" name="Selection1" class="form-control relationship selectpicker" required>
                        <option value="" disabled selected>Selection1 *</option>
                        <option value="1">option 1</option>
                        <option value="2">option 2</option>
                        <option value="3">option 3</option>
                    </select>
                </div>
            
             </div>
        </div>
  </div>
</div>

3
  • That's not it. Please read the question before posting a solution. The original layout is INLINE.
    – devXen
    May 19, 2016 at 7:16
  • Chensformers, I updated my code..please go through my above snippest
    – Ram_UI
    May 19, 2016 at 9:26
  • Omit the units when using 0 in your properties. 0px, 0pt, 0%, 0em, 0rem, etc. All give the same exact result which is 0.
    – Ricky Ruiz
    May 23, 2016 at 14:27
1

        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="container-fluid">

        <form class="form-horizontal" data-toggle="validator" role="form" action="" method="post" id="form1">


            <fieldset style="background-color:#F7F7F7" style="width:100%;">
                <div class="row">
                  <div class="form-inline" style="text-align:left">
         <div class="form-group col-xs-12 col-sm-4 col-sm-push-8">
                        <div class="floating-label-form-group col-xs-6 no-pad-right">
                            <label class="control-label" for="gender">Gender</label>
                            <select id="gender" name="gender" class="form-control selectpicker" required>
                                <option value="" disabled selected>gender *</option>
                                <option value="1">M</option>
                                <option value="2">F</option>
                            </select>
                            <span class="help-block with-errors">Gender helper text</span>
                        </div>             
                        <div class="floating-label-form-group col-xs-6 no-pad-right">
                            <label class="control-label" for="selection2">Selection2</label>
                            <select id="selection2" name="selection2" class="form-control selectpicker" required>
                                <option value="" disabled selected>Selection2 *</option>
                                <option value="1">option 1</option>
                                <option value="2">option 2</option>
                            </select>
                            <span class="help-block with-errors">Selection2 helper text</span>
                        </div>              
                    </div>
                    <div class="form-group col-xs-12 col-sm-3 col-sm-pull-3">
                        <div class="floating-label-form-group col-md-12 no-pad-right">
                            <label class="control-label" for="Selection1">Selection1</label>
                            <select id="Selection1" name="Selection1" class="form-control relationship selectpicker" required>
                                <option value="" disabled selected>Selection1 *</option>
                                <option value="1">option 1</option>
                                <option value="2">option 2/option>
                                <option value="3">option 3</option>
                            </select>
                            <span class="help-block with-errors">Selection1 helper text</span>
                        </div>               
                    </div>

                    <div class="form-group col-xs-12 col-sm-5 col-sm-pull-3">
                        <div class="floating-label-form-group col-xs-6 no-pad-right">
                            <label class="control-label" for="fName">1st Name</label>  
                            <input id="fName" name="fName" class="form-control" type="text" required>
                            <span class="help-block with-errors">1st Name helper text</span>
                        </div>
                        

                        <div class="floating-label-form-group col-xs-6 no-pad-right">
                            <label class="control-label" for="lName">Last Name</label>  
                            <input id="lName" name="lName" class="form-control" type="text" required>
                            <span class="help-block">Last Name helper text</span>
                        </div>
                        
                    </div>
                    
                  </div>
                </div><!-- /row -->
            </fieldset>
        </form>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.