Trying to apply bootstrap components to the form I made

I’ve been slowly re-tooling the form I originally made while participating in the freecodecamp courses. I’ve just become familiar with bootstrap and how to use it for responsive page layouts.

Here it is on Github:

portal_form

Right now, I’m trying to style the first section element of the form. This section has an id of basic_infos. Within #basic_infos, there are three input types: text, email, and number.

I’m having issues using bootstrap to style #basic_infos the way I would like. I’ve tried a lot of different iterations but haven’t figured out what I’m doing wrong.

The effect I want is for the text and email inputs to take up the full width of the form until they reach the md breakpoint. At which point they both take up 6 units of space.

I can get this behavior to happen, but they don’t share that full row space of 12 units, even though they are both within a div of class .row

Instead, they both sit within their own line, taking up 6 units of the form.

Why are they behaving in this way?

So I guess what’s actually happening is that the content inside the columns is not taking up the full 6 units. Why does it do this within .row but not within .col?

Hey,

You add .col to inputs only, but there’re labels too, wrap each input with it’s label and add .col class to outter element. Is that what you’re trying to achieve?

Yes, both the inputs and their labels are wrapped within .form-group divs.

.col is applied to .form-group

These .form-group col’s are taking up the 6 units of space assigned to them, but the inputs aren’t filling that space.

ok, i see,
think the problem here is that nested forms are forbidden, try to stick to bootstrap style, you can take form example from bootstrap docs, say bs4 .form-row does what you want

1 Like