CODEWITHSUNDEEP
jquerycsstwitter-bootstrap-3responsive-design
devXen
devXen

Reputation: 3152

Change Bootstrap layout from inline form to grid on mobile device

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>

Upvotes: 8

Views: 2563

Answers (3)

Ricky Ruiz
Ricky Ruiz

Reputation: 26791

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>

Upvotes: 3

user2560539
user2560539

Reputation: 

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

Upvotes: 1

Ram_UI
Ram_UI

Reputation: 485

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>

Upvotes: 1

Related Questions