代码之家 › 专栏 › 技术社区 › Major Productions

引导4-选择输入未正确对齐的表单行

bootstrap-4 css html

-1

Major Productions · 技术社区 · 7 年前

我跟在后面 the documentation ,并尝试为我正在构建的注册表实现一行表单输入。相关HTML:

<div class="row">
    <div class="my-5 py-4 offset-md-4 col-md-5 col-lg-4 justify-content-center align-items-center">
        <form name="fos_user_registration_form" method="post" action="/app_dev.php/register/" class="fos_user_registration_register">

        <div class="form-group">
            <label for="fos_user_registration_form_name" class="required">Name</label>
            <input type="text" id="fos_user_registration_form_name" name="fos_user_registration_form[name]" required="required" class="form-control" />
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_line1" class="required">Address Line 1</label>
            <input type="text" id="fos_user_registration_form_line1" name="fos_user_registration_form[line1]" required="required" class="form-control" />
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_line2">Address Line 2 (optional)</label>
            <input type="text" id="fos_user_registration_form_line2" name="fos_user_registration_form[line2]" class="form-control" />
        </div>
        <div class="form-row">
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_city" class="required">City</label>
                <input type="text" id="fos_user_registration_form_city" name="fos_user_registration_form[city]" required="required" />
            </div>
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_state" class="required">State</label>
                <select id="fos_user_registration_form_state" name="fos_user_registration_form[state]"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select>
            </div>
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_zipcode" class="required">Zipcode</label>
                <input type="text" id="fos_user_registration_form_zipcode" name="fos_user_registration_form[zipcode]" required="required" />
            </div>
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_phone">Phone (optional)</label>
            <input type="text" id="fos_user_registration_form_phone" name="fos_user_registration_form[phone]" />
        </div>

        <small>We only ship within the US</small>

        <div>
            <button type="submit" id="register-submit-btn" class="btn btn-burnt-orange">Register account</button>
        </div>
        <input type="hidden" id="fos_user_registration_form__token" name="fos_user_registration_form[_token]" value="knrAUCbJNdBKVtkqR57qEzOAExZaqWmleKA4nRBiKeg" />
        </form>
    </div>
</div>

其结果是:

无论我给行中的三个元素指定了什么列宽,它们都不能整齐地放在行中。我猜问题的一部分是州的下降。。。它的宽度没有我想要的那么大。但即使我将city和zipcode的宽度设置得更窄,因此总宽度不到12列,对齐方式仍然与屏幕截图类似。

div

7 回复 | 直到 7 年前

EQuimper 7 年前

很容易修复,带有select的行中的三个表单元素缺少该类 form-control

添加它,它将正确渲染

<div class="row">
    <div class="my-5 py-4 offset-md-4 col-md-5 col-lg-4 justify-content-center align-items-center">
        <form name="fos_user_registration_form" method="post" action="/app_dev.php/register/" class="fos_user_registration_register">

        <div class="form-group">
            <label for="fos_user_registration_form_name" class="required">Name</label>
            <input type="text" id="fos_user_registration_form_name" name="fos_user_registration_form[name]" required="required" class="form-control" />
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_line1" class="required">Address Line 1</label>
            <input type="text" id="fos_user_registration_form_line1" name="fos_user_registration_form[line1]" required="required" class="form-control" />
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_line2">Address Line 2 (optional)</label>
            <input type="text" id="fos_user_registration_form_line2" name="fos_user_registration_form[line2]" class="form-control" />
        </div>
        <div class="form-row">
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_city" class="required">City</label>
                <input type="text" id="fos_user_registration_form_city" name="fos_user_registration_form[city]" required="required" class="form-control" />
            </div>
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_state" class="required">State</label>
                <select id="fos_user_registration_form_state" name="fos_user_registration_form[state]" class="form-control"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select>
            </div>
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_zipcode" class="required">Zipcode</label>
                <input type="text" id="fos_user_registration_form_zipcode" name="fos_user_registration_form[zipcode]" required="required" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_phone">Phone (optional)</label>
            <input type="text" id="fos_user_registration_form_phone" name="fos_user_registration_form[phone]" class="form-control" />
        </div>

        <small>We only ship within the US</small>

        <div>
            <button type="submit" id="register-submit-btn" class="btn btn-burnt-orange">Register account</button>
        </div>
        <input type="hidden" id="fos_user_registration_form__token" name="fos_user_registration_form[_token]" value="knrAUCbJNdBKVtkqR57qEzOAExZaqWmleKA4nRBiKeg" />
        </form>
    </div>
</div>

https://codepen.io/twickstrom/pen/wRMmaa

Carol Skelly 7 年前

正如所有其他答案所述,使用 form-control 会有帮助的。但在较小的屏幕宽度下,仍可能有一些重叠。

而不是使用 col-md-4 ,使用 col-md col-md-auto 以更好地适应输入。

col*

col-*-auto 将收缩以适合其内容的宽度。

  <div class="form-row">
            <div class="form-group col-md">
                <label for="fos_user_registration_form_city" class="required">City</label>
                <input type="text" id="fos_user_registration_form_city" class="form-control" name="fos_user_registration_form[city]" required="required">
            </div>
            <div class="form-group col-md-auto">
                <label for="fos_user_registration_form_state" class="required">State</label>
                <select id="fos_user_registration_form_state" class="form-control" name="fos_user_registration_form[state]">
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                    <option value="AZ">Arizona</option>
                    ...
                </select>
            </div>
            <div class="form-group col-md">
                <label for="fos_user_registration_form_zipcode" class="required">Zipcode</label>
                <input type="text" id="fos_user_registration_form_zipcode" class="form-control" name="fos_user_registration_form[zipcode]" required="required">
            </div>
  </div>

https://www.codeply.com/go/oCoGMyfmXv

也, 你可以用 px-0

是用来定义宽度的一 col-md-3 在屏幕上选择。将此与 上校医学博士

   <div class="form-row">
                <div class="form-group col-md">
                    <label for="fos_user_registration_form_city" class="required">City</label>
                    <input type="text" id="fos_user_registration_form_city" class="form-control" name="fos_user_registration_form[city]" required="required">
                </div>
                <div class="form-group col-md-3">
                    <label for="fos_user_registration_form_state" class="required">State</label>
                    <select id="fos_user_registration_form_state" class="form-control" name="fos_user_registration_form[state]">
                        <option value="AL">Alabama</option>
                        <option value="AK">Alaska</option>
                        <option value="AZ">Arizona</option>
                        ...
                    </select>
                </div>
                <div class="form-group col-md">
                    <label for="fos_user_registration_form_zipcode" class="required">Zipcode</label>
                    <input type="text" id="fos_user_registration_form_zipcode" class="form-control" name="fos_user_registration_form[zipcode]" required="required">
                </div>
    </div>

Demo of both options

Nandita Sharma 7 年前

加上“ w-100 “上课 input 和 select 表单组元素中的标记。它会解决你的问题

<div class="form-group col-md-4">
    <label for="fos_user_registration_form_city" class="required">City</label>
    <input type="text" id="fos_user_registration_form_city" class="w-100" name="fos_user_registration_form[city]" required="required" />
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container-fluid">
  <div class="row">
    <div class="my-5 py-4 offset-md-4 col-md-5 col-lg-4 justify-content-center align-items-center">
      <form name="fos_user_registration_form" method="post" action="/app_dev.php/register/" class="fos_user_registration_register">

        <div class="form-group">
          <label for="fos_user_registration_form_name" class="required">Name</label>
          <input type="text" id="fos_user_registration_form_name" name="fos_user_registration_form[name]" required="required" class="form-control" />
        </div>
        <div class="form-group">
          <label for="fos_user_registration_form_line1" class="required">Address Line 1</label>
          <input type="text" id="fos_user_registration_form_line1" name="fos_user_registration_form[line1]" required="required" class="form-control" />
        </div>
        <div class="form-group">
          <label for="fos_user_registration_form_line2">Address Line 2 (optional)</label>
          <input type="text" id="fos_user_registration_form_line2" name="fos_user_registration_form[line2]" class="form-control" />
        </div>
        <div class="form-row">
          <div class="form-group col-md-4">
            <label for="fos_user_registration_form_city" class="required">City</label>
            <input type="text" id="fos_user_registration_form_city" class="w-100" name="fos_user_registration_form[city]" required="required" />
          </div>
          <div class="form-group col-md-4">
            <label for="fos_user_registration_form_state" class="required">State</label>
            <select id="fos_user_registration_form_state" class="w-100" name="fos_user_registration_form[state]"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select>
          </div>
          <div class="form-group col-md-4">
            <label for="fos_user_registration_form_zipcode" class="required">Zipcode</label>
            <input class="w-100" type="text" id="fos_user_registration_form_zipcode" name="fos_user_registration_form[zipcode]" required="required" />
          </div>
        </div>
        <div class="form-group">
          <label for="fos_user_registration_form_phone">Phone (optional)</label>
          <input type="text" id="fos_user_registration_form_phone" name="fos_user_registration_form[phone]" />
        </div>

        <small>We only ship within the US</small>

        <div>
          <button type="submit" id="register-submit-btn" class="btn btn-burnt-orange">Register account</button>
        </div>
        <input type="hidden" id="fos_user_registration_form__token" name="fos_user_registration_form[_token]" value="knrAUCbJNdBKVtkqR57qEzOAExZaqWmleKA4nRBiKeg" />
      </form>
    </div>
  </div>
</div>

Vishal Panara 7 年前

请使用下面的div

<div class="my-5 py-4 offset-md-3 col-md-5 col-lg-7 justify-content-center align-items-center">

Yogesh Patel 7 年前

你失踪了 class="form-control"

请看下面的HTML:

<div class="row">
    <div class="my-5 py-4 offset-md-4 col-md-5 col-lg-4 justify-content-center align-items-center">
        <form name="fos_user_registration_form" method="post" action="/app_dev.php/register/" class="fos_user_registration_register">

            <div class="form-group">
                <label for="fos_user_registration_form_name" class="required">Name</label>
                <input type="text" id="fos_user_registration_form_name" name="fos_user_registration_form[name]" required="required" class="form-control" />
            </div>
            <div class="form-group">
                <label for="fos_user_registration_form_line1" class="required">Address Line 1</label>
                <input type="text" id="fos_user_registration_form_line1" name="fos_user_registration_form[line1]" required="required" class="form-control" />
            </div>
            <div class="form-group">
                <label for="fos_user_registration_form_line2">Address Line 2 (optional)</label>
                <input type="text" id="fos_user_registration_form_line2" name="fos_user_registration_form[line2]" class="form-control" />
            </div>
            <div class="form-row">
                <div class="form-group col-md-4">
                    <label for="fos_user_registration_form_city" class="required">City</label>
                    <input type="text" id="fos_user_registration_form_city" name="fos_user_registration_form[city]" required="required" class="form-control"/>
                </div>
                <div class="form-group col-md-4">
                    <label for="fos_user_registration_form_state" class="required">State</label>
                    <select id="fos_user_registration_form_state" name="fos_user_registration_form[state]" class="form-control">
                    <option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select>
                </div>
                <div class="form-group col-md-4">
                    <label for="fos_user_registration_form_zipcode" class="required">Zipcode</label>
                    <input type="text" id="fos_user_registration_form_zipcode" name="fos_user_registration_form[zipcode]" required="required" class="form-control"/>
                </div>
            </div>
            <div class="form-group">
                <label for="fos_user_registration_form_phone">Phone (optional)</label>
                <input type="text" id="fos_user_registration_form_phone" name="fos_user_registration_form[phone]" />
            </div>

            <small>We only ship within the US</small>

            <div>
                <button type="submit" id="register-submit-btn" class="btn btn-burnt-orange">Register account</button>
            </div>
            <input type="hidden" id="fos_user_registration_form__token" name="fos_user_registration_form[_token]" value="knrAUCbJNdBKVtkqR57qEzOAExZaqWmleKA4nRBiKeg" />
        </form>
    </div>
</div>

现在它将如下所示:

Nikita Rogatnev 7 年前

添加 class="form-control" . 代码笔: https://codepen.io/rogatnev-nikita/pen/maVjwb

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">

<div class="row">
    <div class="my-5 py-4 offset-md-4 col-md-5 col-lg-4 justify-content-center align-items-center">
        <form name="fos_user_registration_form" method="post" action="/app_dev.php/register/" class="fos_user_registration_register">
        <div class="form-group">
            <label for="fos_user_registration_form_name" class="required">Name</label>
            <input type="text" id="fos_user_registration_form_name" name="fos_user_registration_form[name]" required="required" class="form-control" />
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_line1" class="required">Address Line 1</label>
            <input type="text" id="fos_user_registration_form_line1" name="fos_user_registration_form[line1]" required="required" class="form-control" />
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_line2">Address Line 2 (optional)</label>
            <input type="text" id="fos_user_registration_form_line2" name="fos_user_registration_form[line2]" class="form-control" />
        </div>
        <div class="form-row">
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_city" class="required">City</label>
                <input class="form-control"  type="text" id="fos_user_registration_form_city" name="fos_user_registration_form[city]" required="required" />
            </div>
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_state" class="required">State</label>
                <select class="form-control" id="fos_user_registration_form_state" name="fos_user_registration_form[state]"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select>
            </div>
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_zipcode" class="required">Zipcode</label>
                <input class="form-control" type="text" id="fos_user_registration_form_zipcode" name="fos_user_registration_form[zipcode]" required="required" />
            </div>
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_phone">Phone (optional)</label>
            <input type="text" id="fos_user_registration_form_phone" name="fos_user_registration_form[phone]" />
        </div>

        <small>We only ship within the US</small>

        <div>
            <button type="submit" id="register-submit-btn" class="btn btn-burnt-orange">Register account</button>
        </div>
        <input type="hidden" id="fos_user_registration_form__token" name="fos_user_registration_form[_token]" value="knrAUCbJNdBKVtkqR57qEzOAExZaqWmleKA4nRBiKeg" />
        </form>
    </div>
</div>

-1

NayDwe 7 年前

the documentation

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
    <div class="my-5 py-4 offset-md-4 col-md-5 col-lg-4 justify-content-center align-items-center">
        <form name="fos_user_registration_form" method="post" action="/app_dev.php/register/" class="fos_user_registration_register">

        <div class="form-group">
            <label for="fos_user_registration_form_name" class="required">Name</label>
            <input type="text" id="fos_user_registration_form_name" name="fos_user_registration_form[name]" required="required" class="form-control" />
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_line1" class="required">Address Line 1</label>
            <input type="text" id="fos_user_registration_form_line1" name="fos_user_registration_form[line1]" required="required" class="form-control" />
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_line2">Address Line 2 (optional)</label>
            <input type="text" id="fos_user_registration_form_line2" name="fos_user_registration_form[line2]" class="form-control" />
        </div>
        <div class="form-row">
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_city" class="required">City</label>
                <input type="text" id="fos_user_registration_form_city" name="fos_user_registration_form[city]" class="form-control" required="required" />
            </div>
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_state" class="required">State</label>
                <select class="form-control" id="fos_user_registration_form_state" name="fos_user_registration_form[state]"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select>
            </div>
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_zipcode" class="required">Zipcode</label>
                <input type="text" id="fos_user_registration_form_zipcode" name="fos_user_registration_form[zipcode]" required="required" class="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_phone">Phone (optional)</label>
            <input type="text" id="fos_user_registration_form_phone" name="fos_user_registration_form[phone]" class="form-control"/>
        </div>

        <small>We only ship within the US</small>

        <div>
            <button type="submit" id="register-submit-btn" class="btn btn-burnt-orange">Register account</button>
        </div>
        <input type="hidden" id="fos_user_registration_form__token" name="fos_user_registration_form[_token]" value="knrAUCbJNdBKVtkqR57qEzOAExZaqWmleKA4nRBiKeg" />
        </form>
    </div>
</div>