Form with form-group


I am creating a form with the studio, but I can't creat form-group's like bootstrap documentation recomends.

The documentation recomends this:

 <div class="form-group row">
  <label for="example-text-input" class="col-2 col-form-label">Text</label>
  <div class="col-10">
    <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">

When i try to do this structure, I end up with this:

<div class="form-group">
        <input type="text" class="form-control" />

And the studio doesn't let me assign col size's to the label and the div.

Someone could explain the right way to do forms on the studio?


Does this help?

Yes, it's exactly this. The only problem is that it doesn't allow to set the col sizes in the right menu helpers.

You set the column sizes using the "Attributes" window Click on "Field Label" and then in the "Class Names" box in the "Attributes" editor you change the col size and then do the same for the "Div" making sure that the 2 column values add up to 12 if you want them on the same line

I see it looks like they did a way with the form-horizontal class in favor of adding the row class to a form-group DIV.

However, the label element I don't think ever excepted the COL options in the Options pane in the app, so you've always had to add that manually through the ATTRIBUTES pane like @windy shown. However, you were and still can drag/drop in a Column component into the form-group in which you would have the Options pane's COL options available to it.

In the Studio tab just type in column and drag that into the form-group DIV instead of just a plain DIV element. You will need to add the row class to your form-group though since there doesn't appear to be a setting for that.