{% extends "pxy_dashboard/partials/base.html" %} {% load static %} {% block title %}Form Elements{% endblock title %} {% block pagetitle %} {% include "pxy_dashboard/partials/page-title.html" with pagetitle="Forms" title="Form Elements" %} {% endblock pagetitle %} {% block content %}
Most common form control, text-based input fields. Includes support for all HTML5 types: text
, password
, datetime
, datetime-local
, date
, month
, time
, week
, number
, email
, url
, search
, tel
, and color
.
Wrap a pair of <input class="form-control">
and <label>
elements in .form-floating
to enable floating labels with Bootstrap’s textual form fields. A placeholder
is required on each <input>
as our method of CSS-only floating labels uses the :placeholder-shown
pseudo-element. Also note that the <input>
must come first so we can utilize a sibling selector (e.g., ~
).
<select>
menus need only a custom class, .form-select
to trigger the custom styles.
A switch has the markup of a custom checkbox but uses the .form-switch
class to render a toggle switch. Switches also support the disabled
attribute.
Each checkbox and radio <input>
and <label>
pairing is wrapped in a <div>
to create our custom control. Structurally, this is the same approach as our default .form-check
.
Each checkbox and radio <input>
and <label>
pairing is wrapped in a <div>
to create our custom control. Structurally, this is the same approach as our default .form-check
.
Set heights using classes like .input-lg
, and set widths using grid column classes like .col-lg-*
.
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs
Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.
Create horizontal forms with the grid by adding the .row
class to form groups and using the .col-*-*
classes to specify the width of your labels and controls. Be sure to add .col-form-label
to your <label>
s as well so they’re vertically centered with their associated form controls.
Use the .row-cols-lg-auto
, .g-3
& .align-items-center
class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states. Controls only appear inline in viewports that are at least 576px wide to account for narrow viewports on mobile devices.
Be sure to use .col-form-label-sm
or .col-form-label-lg
to your <label>
s or <legend>
s to correctly follow the size of .form-control-lg
and .form-control-sm
.
By adding .row
& .g-2
, you can have control over the gutter width in as well the inline as block direction.