Form elements

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Open Bootstrap Docs

Default


                                        <div class="form-group">
                                        <input type="text" class="form-control" id="phone" placeholder="Default Input">
                                    </div>
                                

Less Height


                                        <div class="form-group form--sm">
                                        <input type="text" class="form-control" id="phone" placeholder="Default Input">
                                    </div>
                                

Newsletter form


                                    <form action="#" class="form form-subscription">
                                        <div class="form-row">
                                            <div class="form-group col-sm-12">
                                                <div class="input-group mb-3 mb-sm-0">
                                                    <input type="email" class="form-control" placeholder="Enter your email to start" aria-label="Recipient's username">
                                                </div>
                                                <button class="btn btn--submit btn--color-primary btn--bg-white" type="submit">
                                                    <span class="btn__text">Get started</span>
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                

Contact form


                                        <form class="form form--sm">
                                        <div class="form-row mb-20">
                                            <div class="form-group col-sm-12 col-md-6">
                                                <label class="label-control mb-10" for="name">Your Name*</label>
                                                <input type="text" class="form-control" id="name" placeholder="i.e. John Doe" required>
                                            </div>
                                            <div class="form-group col-sm-12 col-md-6">
                                                <label class="label-control mb-10" for="phone">Your Phone Number</label>
                                                <input type="text" class="form-control" id="phone" placeholder="+(123)123 456">
                                            </div>
                                        </div>
                                        <div class="form-row mb-20">
                                            <div class="form-group col-sm-12 col-md-6">
                                                <label class="label-control mb-10" for="email">Email address*</label>
                                                <input type="email" class="form-control" id="email" placeholder="i.e. example@example.com" required>
                                            </div>
                                            <div class="form-group col-sm-12 col-md-6">
                                                <label class="label-control mb-10" for="subject">Subject*</label>
                                                <input type="text" class="form-control" id="subject" placeholder="i.e. Webdesign" required>
                                            </div>
                                        </div>
                                        <div class="form-row mb-20">
                                            <div class="form-group col-sm-12">
                                                <label class="label-control mb-10" for="message">Your Message</label>
                                                <textarea class="form-control" id="message" rows="4" placeholder="i.e. The design is...." required></textarea>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-sm-12 text-center">
                                                <button type="submit" class="btn btn--bg-primary btn-splash-hover btn-3d-hover">
                                                    <span class="btn__text">Submit</span>
                                                </button>
                                            </div>
                                        </div>
                                    </form>