HTML and CSS markup for flexible form layout I'm trying to have a HTML / CSS structure for flexible layouts for forms. I tried to look at Bootstrap codes for help with this (without actually using Bootstrap itself). I've gone with something along these lines:

http://cssdeck.com/labs/stidyuic



* {padding: 0; margin: 0; box-sizing: border-box;}
body {width: 80%; margin: 0 auto; margin-top: 30px;}
.form-row {
  display: block;
}
.form-group:first-child {
  padding-left: 0px;
}
.form-group {
  margin-bottom: 20px;
  float: left;
  padding-left: 20px;
}
.col-6 {
  width: 50%;
}
.col-3 {
  width: 25%;
}
label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}
.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  color: #555;
  vertical-align: middle;
  background-color: #FFF;
  background-image: none;
  border: 1px solid #CCC;
  border-radius: 4px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}
input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
}
form {
  display: block;
  margin-top: 0em;
}
&lt;div class="form-row"&gt;
               &lt;div class="col-6 form-group"&gt;
                  &lt;label class="control-label"&gt;Title&lt;/label&gt;
                  &lt;input class="form-control" placeholder="Test" size="4" type="text"&gt;
               &lt;/div&gt;
               &lt;div class="col-3 form-group"&gt;
                  &lt;label class="control-label"&gt;Category&lt;/label&gt;
                  &lt;select class="form-control"&gt;
                     &lt;option value="A"&gt;
                        A
                     &lt;/option&gt;
                     &lt;option value="B"&gt;
                        B
                     &lt;/option&gt;
                  &lt;/select&gt;
               &lt;/div&gt;
               &lt;div class="col-3 form-group"&gt;
                  &lt;label class="control-label"&gt;Type&lt;/label&gt;
                  &lt;select class="form-control"&gt;
                     &lt;option&gt;
                        A
                     &lt;/option&gt;
                     &lt;option&gt;
                        B
                     &lt;/option&gt;
                     &lt;option&gt;
                        C
                     &lt;/option&gt;
                  &lt;/select&gt;
               &lt;/div&gt;
&lt;/div&gt;




I want to be able to do the following:


Have anywhere from 1 to four inputs on each row.
Have the label above the form
Modify the form layout with CSS when the resolution changes (media query)


Questions:


Is it a sensible approach to use this code structure in order to
achieve this?
Is taking Bootstrap’s form structure a logical approach to this problem?
Your code looks perfectly fine.  In fact, it all validates by the validators at W3C perfectly fine, with one exception - your HTML file should be structured like this:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8" /&gt;
        &lt;title&gt;Your Page Title Here&lt;/title&gt;
        &lt;!-- other code here --&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;!-- your display code here --&gt;
    &lt;/body&gt;
&lt;/html&gt;


The validators can be found here:


  HTML validator
  CSS validator


Your code seems perfectly fine the way it is, and I would say the only thing wrong with it is from the user's perspective.  You have the Category menu overlapping the Title menu, which is not good; you should adjust your columns to prevent this.