1. Side-by and drop-down options
<formclass= "Form-horizontal"role= "form"> <fieldset> <legend>Configure the data source</legend> <Divclass= "Form-group"> <labelclass= "Col-sm-2 Control-label" for= "Ds_host">Host Name</label> <Divclass= "Col-sm-4"> <inputclass= "Form-control"ID= "Ds_host"type= "text"placeholder= "192.168.1.161"/> </Div> <labelclass= "Col-sm-2 Control-label" for= "Ds_name">Database name</label> <Divclass= "Col-sm-4"> <inputclass= "Form-control"ID= "Ds_name"type= "text"placeholder= "MSH"/> </Div> </Div> <Divclass= "Form-group"> <labelclass= "Col-sm-2 Control-label" for= "Ds_username">User name</label> <Divclass= "Col-sm-4"> <inputclass= "Form-control"ID= "Ds_username"type= "text"placeholder= "root"/> </Div> <labelclass= "Col-sm-2 Control-label" for= "Ds_password">Password</label> <Divclass= "Col-sm-4"> <inputclass= "Form-control"ID= "Ds_password"type= "Password"placeholder= "123456"/> </Div> </Div> </fieldset> <fieldset> <legend>Select related Tables</legend> <Divclass= "Form-group"> <label for= "Disabledselect"class= "Col-sm-2 Control-label">Table name</label> <Divclass= "Col-sm-10"> <SelectID= "Disabledselect"class= "Form-control"> <option>Prohibit selection</option> <option>Prohibit selection</option> </Select> </Div> </Div> </fieldset> <fieldset> <legend>Field name</legend> <Divclass= "Form-group"> <label for= "Disabledselect"class= "Col-sm-2 Control-label">Table name</label> <Divclass= "Col-sm-10"> <SelectID= "Disabledselect"class= "Form-control"> <option>Prohibit selection</option> <option>Prohibit selection</option> </Select> </Div> </Div> </fieldset> </form>
<Divclass= "Form-group"> <label for= "Ds_name"class= "Col-sm-2 Control-label">Table name</label> <Divclass= "Col-sm-4"> <SelectID= "Disabledselect"class= "Form-control"> <option>Prohibit selection</option> <option>Prohibit selection</option> </Select> </Div> </Div>
Bootstrap just modify its style to achieve the desired effect.
Bootstrap form layout style