Change form style

bootstrap

#1

Hi
My name is Frank, trying to change bootstrap form style from vertical to horizontal conform window change, but 768 PX looks stone carved I can’t change to 300px, however background can be changed easily but not forms. I added breakpoints with @ media query, still not working .I can send code too, just please help me, thank you, Frank


#2

This is really hard to understand without clear punctuation. Slow down. Add paragraph breaks and punctuation. (Sorry if you are ESL.)

Known facts:

  • You are using Bootstrap.
  • You want to go from vertical to horizontal layout on window change (rotation of device?).

Those are the only facts I can figure out, sorry. Have you read the Bootstrap docs to see how they address the issue?


#3

Hi there @toronto2009 Welkcome to the SP forums.

Do you have a link to the page in question?


#4

Hi
Sorry for excitement. You understand the keyfacts perfectly, just I don’t know how to handle it. I’ve done an experiment, changing layout as you mentioned in bootstrap, with help of jquery, toggling between vertical and horizontal layout. Tree classes needs to be toggled, form- horizontal, labrlel: length, control label and input, at least as I understood and done. I tried to control the breakpoint too but defaulted 768px I could not change, not even adding another one 300px, with @media query . I’ll try to post my code too.
Thank you Frank


#5

I’ll try to post my code, if it is possible


#6

Hi @toronto2009, there’s certainly no jQuery required to achieve this – you can just apply a regular grid to your form, and add breakpoint classes as required.


#7

Hi
Thank you for answer. My very first ,try did not work as I expected and that’s why decided to control it with jquery. Horizontal layout didn’t change to vertical, however, w3schools horizontal form appears on mobile screen as vertical one, I don’t understand this part, please help me, thank you, Frank


#8

Did you check out the links I posted above? If you scroll down a bit in the first one there’s an example with a form that does exactly that. If this doesn’t work for you you’ll have to post your code so we can help you…


#9

Thank you for answer. I can’t see on my phone, I need to open up my laptop, hopefully I can see that there or I’ll post my code. I have some work to do and I’ll try to post my code, thank you, Frank