How to make TextBox responsive with Bootstrap?

[Eduardo]

Greetings!

I'm having some trouble dealing with the responsivity of textboxes in SyncFusion with bootstrap.

I'd like to show two textboxes in the same line, inside a row. But when the screen gets smaller than 576px of Width, each textbox occupy the whole screen.

I tried putting the class "col" in divs in the element itself and in the divs with "control-wrapper", but I don't know which is correct.

Both Email Textboxes appear as col-xs-12 when the screen is smaller than 576px, but they should be 6:

The fields above should be longer, the email should be 10 and the select should be 6, turning into two rows

I believe I'm doing something wrong.

Is there any documentation about this?

How could I make this work?

Best regards,

Attachment: CadastroPedido_3a2f4fc4.rar

[Berly Christopher]

Hi Consensu Soluções, 

  

Greetings from Syncfusion support. 

  

We have modified the class based on the requested requirement and attached it below. 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/168747_Textbox-569211559  

  

To know more about this alignment with bootstrap class, please refer the below documentation link. 

  

https://getbootstrap.com/docs/4.0/layout/grid/ 

  

If we misunderstood your query, please share the use case requirement clearly that will help us to check and proceed further from our end. 

  

Regards, 

Berly B.C 

[Eduardo]

Thank you very much!

I found the solution in the table below.

If anyone have the same question, the "col-" class applies to screens below 576px. My mistake was to think that "col-" would apply to any non-specified screen size. 

[Berly Christopher]

Hi Consensu Soluções, 

  

We are glad to know that the issue is resolved at your end. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C