While I’m stumbling through this test I’m seeing code in the sample test form within the form element like this: div class=“form-group” and again inside the input element I see this: class=“form-control”. What is a “form-group” class inside each div? What is a “form control” class inside each input section? Are they related and what is their function. The tests pass without this code. Thanks very much. James
I would suggest you look at the example project code and see if you can figure it out.
https://codepen.io/freeCodeCamp/pen/VPaoNP
If you still have questions just ask.
I have looked at the example project code many times. Sorry, no clue yet . I also looked at several other survey forms from other students and none of them has this code, so maybe I’m not the only person who doesn’t know what it is. I googled it and it looks like it does something cool but the professional lingo is a little too complicated for me to understand (yet). Anyway, if you like explain it, I’d love to learn something. Thanks.
What part of the CSS do you not understand?
.form-group {
margin: 0 auto 1.25rem auto;
padding: 0.25rem;
}
.form-control {
display: block;
width: 100%;
height: 2.375rem;
padding: 0.375rem 0.75rem;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
Edit: They are really just containers, but the .form-control
has some CSS specific to input
elements.
Also, full disclosure. Both the names and a few of the properties are taken from Bootstrap (with some tweaks as I remember).
Hi @james,
thank you for your question.
I think that they are related. The form is a set of small “divs” in a single “div”. Each “div” has its specific properties. For example, the “form-group” class is the container for each of the input elements. It’s just a way of representing the content. The “form-controller” class is not a “container” like the “form-group” class, but It stylizes the elements of each container. Look at the CSS code and change some values to see the effect.
.form-group {
margin: 0 auto 1.25rem auto;
padding: 0.25rem;
}
.form-control {
display: block;
width: 100%;
height: 2.375rem;
padding: 0.375rem 0.75rem;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}type or paste code here
Thank you sir. It’s going to be a long trip…
With the will of course! Good coding!