Responsive Form with two columns using bootstrap | Community
Skip to main content
A
Anonymous
August 29, 2016
Question

Responsive Form with two columns using bootstrap

  • August 29, 2016
  • 1 reply
  • 6152 views

Hi

I am trying to achieve 2-column style layout for embedded Marketo Forms using Bootstrap CSS as below:

FirstName:......................                     Address:..............................

LastName:.....................                      City:......................................

Phone:............................                     Country:................................

The problem is the whole form is embedded under a single "col-sm-6". I was able to right align the fields (Address, City,Country) for desktop but it breaks the responsiveness as there is no col-6 defined separately on these columns.

<div class="row">

     <div class="col-sm-6">

              {embedded Mkto Form}

Please let me know if anyone has come across a similar issue or any pointers on how to fix it.

Thank you

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Grégoire_Miche2
Grégoire_Miche2
Level 10
August 29, 2016

You have to manage the form styling through it's own CSS. With regards to you bootstrap framework, the form will be a whole.

But if you create the form as a 2 column form in Marketo and insert it in a full width (col-sm-12), it should work.

-Greg

A
Anonymous
August 29, 2016

Thanks @Grégoire Michel​. I have options to customize CSS Classes but how can i manipulate the Marketo Form HTML to use bootstrap css classes? Any pointers would be really helpful

Grégoire_Miche2
Grégoire_Miche2
Level 10
August 29, 2016

There is no much way in fact.

You can destyle a form using @Sanford Whiteman​ code here MktoForms2 :: Destyle Marketo form - JSFiddle there is another code, from the same author, that provides handlers on each field to each field, but I could not find it in the community. May be it could be used to add bootstrap classes.

But JS is, AFAIK, the only possibility to do this. Otherwise, you will have to use you own set of classes, and not bootstrap ones.

-Greg

    Terms & ConditionsAccessibility statement

    Loading footer...