Magento 2: How to add custom css class in Checkout shipping address form

Question

Want two input fields in one Line on checkout page. Looks like it is binded by knockoutjs. Didn't figure out where to add custom classes. Looked into so many files (Magento_Ui and Magento_Checkout) but didn't found anything to change the classes. Please help me out in making the following shipping address template.

enter image description here

• Manoj Deswal: 1) Magento way magento.stackexchange.com/a/195712/54588 2 ) Easiest way using bootstrap : magento.stackexchange.com/a/195553/54588
• Vinay: @Manoj where to add css class in checkout shipping form. Which File?
• Manoj Deswal: Any custom css you can add in "_extend.less" for any any page ..the best magento way..state in 1st way.... 2nd you can add bootstrap in your project and use bootstrap classes
• Vinay: @Manoj but there is no div added in checkout page. I will write the css if there is specific div. How to add div in Checkout Shipping Address Form fields.
• Manoj Deswal: start debug mode from admin and find out the file , where you can add div or custom classes

Answer 1

Enter the css code in custom.css to achieve design mention in question image (checkout shipping fields). It will make all fields to half except Street Address

.checkout-index-index .form-shipping-address #shipping-new-address-form {
 .field {
 &:nth-child(2n+1) {
 width: 49%;
 float: left;
 }
 &:nth-child(2n) {
 width: 49%;
 float: right;
 }
 }
 fieldset {
 width: 100% !important;
 div.field {
 width: 100% !important;
 }
 }
 } 

• Pratik Mehta: Awesome, It works for me.
• Sayyed Hasan: may i know the path of this file plz