how to display 2 form fields on same line with bootstrap -

-

i creating form in bootstrap should responsive. see below code.

<form novalidate="novalidate" class="form-inline">         <div class="form-group">             <label class="col-sm-4 control-label" for="inputfirstname">first name:</label>              <div class="col-sm-4">                 <input class="form-control" type="text" id="inputfirstname" ng-model="patient.firstname"/>             </div>         </div>         <div class="form-group">             <label class="col-sm-4 control-label" for="inputlastname">last name:</label>              <div class="col-sm-4">                 <input class="form-control" type="text" id="inputlastname" ng-model="patient.lastname"/>             </div>         </div>          <div class="form-group">             <label class="col-sm-4 control-label" for="inputmiddlename">middle name:</label>              <div class="col-sm-4">                 <input class="form-control" type="text" id="inputmiddlename" ng-model="patient.middlename" placeholder="middle name"/>             </div>         </div> </form>

i need have 2 fields(firstname , lastname) on same line , middle name in other line. , there around 10 fields in form.

when use form-inline 3 fields arranged in 1 line , there no space between fields of rows.

how should understand .col css. how related responsive.

i have done demo should fit requirements.

i have changed form-group classes col-md-12 span whole screen , wrapped form in container-fluid class.

markup:

<div class="container-fluid"> <form novalidate="novalidate" class="form-inline">     <div class="col-md-6">         <label class="col-sm-4 control-label" for="inputfirstname">first name:</label>          <div class="col-sm-4">             <input class="form-control" type="text" id="inputfirstname" ng-model="patient.firstname">         </div>     </div>     <div class="col-md-6">         <label class="col-sm-4 control-label" for="inputlastname">last name:</label>          <div class="col-sm-4">             <input class="form-control" type="text" id="inputlastname" ng-model="patient.lastname">         </div>     </div>      <div class="col-md-12">         <label class="col-sm-2 control-label" for="inputmiddlename">middle name:</label>          <div class="col-sm-4">             <input class="form-control" type="text" id="inputmiddlename" ng-model="patient.middlename" placeholder="middle name">         </div>     </div> </form> </div>

in order obtain space between first , second line, can override bootstrap css adding .col-md-12{margin-top:20px;}


Comments

  1. UnknownJune 14, 2018 at 12:08 AM

    thanks for nice information. Are you looking for best dissertation editing, writing and proofreading services? Our Dissertation Editors provide the highest standard of editing available

    ReplyDelete
  2. demon smithFebruary 11, 2019 at 10:43 PM

    get homework help by students assignment help in UK.we are bunch of experts of homework.We give best services of homework.

    ReplyDelete
  3. SilviaNovember 9, 2019 at 5:48 AM

    What a wonderful piece of information looking forward for more. Everyday hustle and bustle make it difficult for most people to get some time for hitting the gym, but doing a few yoga poses right in the comfort of your home can be good enough. All from Best Yoga Wheel

    ReplyDelete

Post a Comment

Popular posts from this blog

java - Oracle EBS .ClassNotFoundException: oracle.apps.fnd.formsClient.FormsLauncher.class ERROR -

-
i need in configuring java on machine because, when try loading forms, loader goes in circles , gives error: java.lang.classnotfoundexception: oracle.apps.fnd.formsclient.formslauncher.class @ sun.plugin2.applet.applet2classloader.findclass(unknown source) @ sun.plugin2.applet.plugin2classloader.loadclass0(unknown source) @ sun.plugin2.applet.plugin2classloader.loadclass(unknown source) @ sun.plugin2.applet.plugin2classloader.loadclass(unknown source) @ java.lang.classloader.loadclass(unknown source) @ sun.plugin2.applet.plugin2classloader.loadcode(unknown source) @ sun.plugin2.applet.plugin2manager.createapplet(unknown source) @ sun.plugin2.applet.plugin2manager$appletexecutionrunnable.run (unknown source) @ java.lang.thread.run(unknown source) i have tried re-installing firefox, older versions of java runtime environments, disabling proxy. what missing? application working on other machines. i spent around 100 hours finding s
Read more

c# - how to use buttonedit in devexpress gridcontrol -

-
Image
i trying create gridcontrol buttonedit in 1 of columns. when user clicks button edit, popups form select product. when selection done on popup, returns datarow selection main grid below. but when column loses focus, value wrote column disappear. here code creates gridcontrol's data , buttonedit's click event. private void frmsiparisnew_load(object sender, eventargs e) { dt = new datatable(); dt.columns.add("malzeme_kodu",typeof(string)); dt.columns.add("malzeme_aciklama", typeof(string)); dt.columns.add("adet", typeof(decimal)); dt.columns.add("birim", typeof(string)); dt.columns.add("fiyat", typeof(decimal)); dt.columns.add("kur", typeof(string)); dt.columns.add("tutar", typeof(decimal)); datarow dr = dt.newrow(); dt.rows.add(dr); gc.datasource = dt; } private void repositoryitembuttoneditmal
Read more

nvd3.js - angularjs-nvd3-directives setting color in legend as well as in chart elements -

-
good morning i using angularjs-nvd3-directives, great, having difficulties when setting color of multi bar chart ( http://cmaurer.github.io/angularjs-nvd3-directives/multi.bar.chart.html ). the show legend works well: <div ng-controller="examplectrl"> <nvd3-multi-bar-chart data="exampledata" id="showlegendexample" width="550" height="300" showxaxis="true" showyaxis="true" xaxistickformat="xaxistickformatfunction()" showlegend="true"> <svg></svg> </nvd3-multi-bar-chart> </div> but when add option in conjunction color="colorfunction()" where, var colorarray = ['#ff0000', '#0000ff', '#ffff00', '#00ffff']; $scope.colorfunction = function() { return function(d, i) { return colorarray[i]; }; } the color of cha
Read more