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.
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.
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?
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?
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