Inputs

Note: The markup that can be copied to your clipboard from this page is utilizing the latest Bootstrap 5.2.2 library markup. If your project is currently using the previous Bootstrap 4.6.2 library, you must replace any "data-bs-" attribute with "data-". The "-bs" attribute addition applies to Boostrap 5.2.2 only so as to not collide with other Javascript frameworks that may also utilize "data" attributes.

Example: Input (Without Class)

Copy

                                    
                                        <input type="text" name="" id="" placeholder="Required" aria-label="Text Input">

Example: Input (With "form-control" Class)

Success Message

Error Message

Copy

                                    
                                        <input type="text" class="form-control" name="" id="" placeholder="Required" aria-label="Text Input">

Copy

                                    
                                    <!-- SUCCESS -->

                                    <input type="text" class="form-control is-valid" name="" id="" placeholder="Required" aria-label="Text Input">

                                    <!-- SUCCESS WITH MESSAGE -->

                                    <input type="text" class="form-control is-valid" name="" id="" placeholder="Required" aria-label="Text Input">

                                    <div class="valid-feedback">Text</div>

                                    <!-- ERROR WITH MESSAGE -->

                                    <input type="text" class="form-control is-invalid" name="" id="" placeholder="Required" aria-label="Text Input" required>

                                    <div class="invalid-feedback">Text</div>

Example: Input LG (With "form-control form-control-lg" Class)

Copy

                                    
                                        <input type="text" class="form-control form-control-lg" name="" id="" placeholder="Required" aria-label="Text Input">

Example: Input XL (With "form-control form-control-xl" Class)

Copy

                                    
                                        <input type="text" class="form-control form-control-xl" name="" id="" placeholder="Required" aria-label="Text Input">

Example: Input Group

$ .00

Copy

                                    
                                        <div class="input-group">

                                        <span class="input-group-text" id="">$</span>

                                        <input type="text" class="form-control" name="" id="" placeholder="Amount (to the nearest dollar)" aria-label="Text Input">

                                        <span class="input-group-text" id="">.00</span>

                                        </div>

Example: Input Group LG

$ .00

Copy

                                    
                                        <div class="input-group input-group-lg">

                                        <span class="input-group-text" id="">$</span>

                                        <input type="text" class="form-control" name="" id="" placeholder="Amount (to the nearest dollar)" aria-label="Text Input">

                                        <span class="input-group-text" id="">.00</span>

                                        </div>

Example: Input Group XL

$ .00

Copy

                                    
                                        <div class="input-group input-group-xl">

                                        <span class="input-group-text" id="">$</span>

                                        <input type="text" class="form-control" name="" id="" placeholder="Amount (to the nearest dollar)" aria-label="Text Input">

                                        <span class="input-group-text" id="">.00</span>

                                        </div>

Example: Input Group (With Dollar Symbol)

Copy

                                    
                                        <div class="input-group">

                                        <span class="input-group-text" id="">$</span>

                                        <input type="text" class="form-control" name="" id="" placeholder="0.00" aria-label="Text Input">

                                        </div>

Example: Input Group (With Currency Abbreviation)

USD

Copy

                                    
                                        <div class="input-group">

                                        <input type="text" class="form-control" name="" id="" placeholder="0.00" aria-label="Text Input">

                                        <span class="input-group-text" id="">USD</span>

                                        </div>

Example: Input Group (With Dropdown Selector at Start)

Copy

                                    
                                        <div class="input-group">

                                        <button type="button" class="btn btn-default btn-outline dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>

                                        <ul class="dropdown-menu">

                                        <li><a href="#" class="dropdown-item">Link</a></li>

                                        <li><hr class="dropdown-divider" /></li>

                                        <li><a href="#" class="dropdown-item">Link</a></li>

                                        <li><a href="#" class="dropdown-item">Link</a></li>

                                        <li><a href="#" class="dropdown-item">Link</a></li>

                                        </ul>

                                        <input type="text" class="form-control" name="" id="" placeholder="Required" aria-label="Text Input with Dropdown Button">

                                        </div>

Example: Input Group (With Dropdown Selector at End)

Copy

                                    
                                        <div class="input-group">

                                        <input type="text" class="form-control" name="" id="" placeholder="Required" aria-label="Text Input with Dropdown Button">

                                        <button type="button" class="btn btn-default btn-outline dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>

                                        <ul class="dropdown-menu">

                                        <li><a href="#" class="dropdown-item">Link</a></li>

                                        <li><hr class="dropdown-divider" /></li>

                                        <li><a href="#" class="dropdown-item">Link</a></li>

                                        <li><a href="#" class="dropdown-item">Link</a></li>

                                        <li><a href="#" class="dropdown-item">Link</a></li>

                                        </ul>

                                        </div>