html - padding between col-md2 elements -


my goal show 6 columns in 1 row. here's part of how them done (shown first 3).

i have code:

<div class="col-md-2">   <input mytr="first_name" mytrid="" name="first_name[]" id="first_name" class="form-control" placeholder="first name" type="text"> </div>  <div class="col-md-2">   <input mytr="middle_name" mytrid="" name="middle_name[]" id="middle_name"      class="form-control" placeholder="middle name" type="text"> </div>  <div class="col-md-2">   <input mytr="last_name" mytrid="" name="last_name[]" id="last_name" class="form-control" placeholder="last name" type="text"> </div> 

it produces following controls padding between them:

enter image description here

i'd editors have 1px of padding , them close 1 possible.

what add class this? if possible @ all?

you need change .col-md-2 padding values. in following html added .little-padding class use , make different padding.

<div class="container">     <div class="row little-padding">         <div class="col-md-2">             <input mytr="first_name" mytrid="" name="first_name[]" id="first_name" class="form-control" placeholder="first name" type="text">         </div>         <div class="col-md-2">             <input mytr="middle_name" mytrid="" name="middle_name[]" id="middle_name" class="form-control" placeholder="middle name" type="text">         </div>         <div class="col-md-2">             <input mytr="last_name" mytrid="" name="last_name[]" id="last_name" class="form-control" placeholder="last name" type="text">         </div>     </div> </div> 

you can have css. instead of padding-left:15px; , padding-right:15px; (which bootstrap's default values) gave padding-left:0; , padding-right:1px;.

after that, gave default padding values first , last child .col-md-2 divs stay inside .row.

.row.little-padding .col-md-2 {padding-right:1px; padding-left:0;} .row.little-padding .col-md-2:first-child {padding-left:15px;} .row.little-padding .col-md-2:last-child {padding-right:15px;} 

here working demo.

note: if want behavior other classes need use [class^="col-"] selector applies col-* classes (demo here) might not work cases.


Comments

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -