https://www.freecodecamp.com/challenges/style-text-inputs-as-form-controls
рдпрд╣ рдЪреБрдиреМрддреА рдмрд╣реБрдд рдЕрдзрд┐рдХ рдЬрд╛рдирдХрд╛рд░реАрдкреВрд░реНрдг рд╣реЛрдЧреА рдпрджрд┐ рдЗрдирдкреБрдЯ рдлрд╝реАрд▓реНрдб рдореЗрдВ рдлреЙрд░реНрдо-рдХрдВрдЯреНрд░реЛрд▓ рдХреНрд▓рд╛рд╕ рдХреЛ рдЬреЛрдбрд╝рдиреЗ рдХрд╛ рд╡рд░реНрдгрди рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХрд░рддрд╛ рд╣реИред рдХреА рддрд░реНрдЬ рдкрд░ рдХреБрдЫ:
рд╕рднреА рд╢рд╛рдмреНрджрд┐рдХ [рдЗрдирдкреБрдЯ], [textarea], рдФрд░ [[.form-control] рд╡рд░реНрдЧ рдХреЗ рд╕рд╛рде [рдЪреБрдирд┐рдВрджрд╛] рддрддреНрд╡реЛрдВ рдХреА рдЪреМрдбрд╝рд╛рдИ 100% рд╣реИред
рдпрд╣ рдЪреБрдиреМрддреА рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдХрд╛рдлреА рдХрдо рд╣реИ рдФрд░ рдпрд╣ рдПрдХ рд╡реНрдпрд╛рдЦреНрдпрд╛ рдЬреЛрдбрд╝рдиреЗ рд▓рд╛рдпрдХ рд╣реИред
рдкрд╣рд▓реЗ рдЯрд╛рдЗрдорд░ рдХреЗ рд▓рд┐рдП:
рдЖрдкрдХреЛ рдЗрд╕ рдкрдВрдХреНрддрд┐ рдХреЗ рддрд╣рдд рд╡рд╛рдХреНрдп рдЬреЛрдбрд╝рдирд╛ рд╣реЛрдЧрд╛ред рдХреГрдкрдпрд╛, рдпреЛрдЧрджрд╛рди рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╣рдорд╛рд░реЗ рдпреЛрдЧрджрд╛рдирдХрд░реНрддрд╛рдУрдВ рдХреЗ рдЪреИрдЯ рд░реВрдо рддрдХ рдХрд┐рд╕реА рд╕рд╣рд╛рдпрддрд╛ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред
рдиреЛрдЯ: рдпрджрд┐ рдЖрдк рдирдП рд╣реИрдВ рдФрд░ рдкрд╣рд▓реЗ рдПрдХ рдЬрдорд╛ рдирд╣реАрдВ рдХрд┐рдпрд╛ рд╣реИ, рддреЛ рдЖрдк рдХреЗрд╡рд▓ рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХреЗ рд▓рд┐рдП рдПрдХ рдкреБрд▓ рдЕрдиреБрд░реЛрдз рдкреНрд░рд╕реНрддреБрдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдЗрд╕рд▓рд┐рдП рд╕рдорд╕реНрдпрд╛ рд▓реЗрдмрд▓
first-timers-only
: рдЕрдЯрдХ_рдЖрдЙрдЯ_рдЯреЙрдиреНрдЧ_рд╡рд┐рдВрдХрд┐рдВрдЧ_рдиреА:
рдХреЛрдб рдЖрдкрдХреЛ рд╡рд┐рд╢реЗрд╖ рд░реВрдк рд╕реЗ рдЬреЛрдбрд╝рдирд╛ рд╣реЛрдЧрд╛
"All textual <code><input></code>, <code><textarea></code>, and <code><select></code> elements with the class <code>.form-control</code> have a width of 100%."
рдЗрд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП
рд╕рднреА рд╢рд╛рдмреНрджрд┐рдХ
<input>
,<textarea>
, рдФрд░<select>
рддрддреНрд╡реЛрдВ рдХреЗ рд╕рд╛рде рд╡рд░реНрдЧ.form-control
рдЪреМрдбрд╝рд╛рдИ 100% рд╣реИред
рд╕реБрдиреЛред рдореИрдВ рдПрдХ рдкрд╣рд▓рд╛-рдЯрд╛рдЗрдорд░ рд╣реВрдБ рдЬрд┐рд╕реЗ рдлреНрд░реА рдХреЛрдб рдХреИрдореНрдк рдореЗрдВ рдпреЛрдЧрджрд╛рди рджреЗрдиреЗ рдХреЗ рд╕рд╛рде рд╢реБрд░реБрдЖрдд рдХрд░рдиреЗ рдореЗрдВ рджрд┐рд▓рдЪрд╕реНрдкреА рд╣реИред рдореИрдВ рдЗрд╕ рдореБрджреНрджреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рдкреАрдЖрд░ рдкреНрд░рд╕реНрддреБрдд рдХрд░реВрдВрдЧрд╛ред рдзрдиреНрдпрд╡рд╛рдж!
рдЕрд░реЗ рдЯреЗрд╕реНрдЯ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдХреНрдпрд╛ ??
рдкреНрд░рддреНрдпреЗрдХ рдЗрдирдкреБрдЯ рдХреЗ рд▓рд┐рдП рдЯреЗрд╕реНрдЯ рдХреЛ рдЬреЛрдбрд╝рд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред
рд╢реИрд▓реА-рдкрд╛рда-рдЗрдирдкреБрдЯ-рдПрдЬрд╝-рдлреЙрд░реНрдо-рдирд┐рдпрдВрддреНрд░рдг рдореЗрдВ рд╕рдорд╕реНрдпрд╛ рд╣реЛрдирд╛
рдмрд╕ рдПрдХ рд╡рд░реНрдЧ = "рд░реВрдк-рдирд┐рдпрдВрддреНрд░рдг" рджреЗрдВ
1) <form action="/submit-cat-photo" class="form-control">
2) <div class="row" class="form-control">
рдЖрдкрдХреЗ рдЪреЗрдХрдмреЙрдХреНрд╕ рдХреЗ рдкрд╣рд▓реЗ div i.e. <div class="col-xs-4">
рдФрд░ рдЕрдВрдд рдореЗрдВ рдпрд╣рд╛рдБ рдЬреЛрдбрд╝реЗрдВ
3) <input type="text" placeholder="cat photo URL" class="form-control" required>
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рд╢реИрд▓реА-рдкрд╛рда-рдЗрдирдкреБрдЯ-рдПрдЬрд╝-рдлреЙрд░реНрдо-рдирд┐рдпрдВрддреНрд░рдг рдореЗрдВ рд╕рдорд╕реНрдпрд╛ рд╣реЛрдирд╛
рдмрд╕ рдПрдХ рд╡рд░реНрдЧ = "рд░реВрдк-рдирд┐рдпрдВрддреНрд░рдг" рджреЗрдВ
1) <form action="/submit-cat-photo" class="form-control">
2) <div class="row" class="form-control">
рдЖрдкрдХреЗ рдЪреЗрдХрдмреЙрдХреНрд╕ рдХреЗ рдкрд╣рд▓реЗ div
i.e. <div class="col-xs-4">
рдФрд░ рдЕрдВрдд рдореЗрдВ рдпрд╣рд╛рдБ рдЬреЛрдбрд╝реЗрдВ
3)
<input type="text" placeholder="cat photo URL" class="form-control" required>