Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
Radio & Checkbox
Radio buttons and checkboxes are essential form controls that allow users to make selections. Bootstrap provides various styles and options to customize these controls while maintaining consistency and accessibility across your application.
Basic Controls
Basic radio buttons and checkboxes come with default styling and states:
- Default: Standard unchecked state
- Checked: Selected state
- Disabled: Non-interactive state
Inline Controls
Group radio buttons or checkboxes on the same horizontal row using the
form-check-inline class.
Colored Controls
Add visual meaning to controls using Bootstrap's background utility classes like
bg-primary, bg-success, etc.
Sized Controls
Adjust the size of controls using form-check-input-sm for smaller controls or
form-check-input-lg for larger ones.
Button Style
Transform radios and checkboxes to toggle buttons using Bootstrap's button classes and
btn-check class.
Basic with paragraph Options
Create pricing-like options using Bootstrap's native card and utility classes:
- Card Layout: Clean and organized presentation
- Flex Utilities: Perfect alignment of content
- Badge Components: Highlight important information
Icon Options
Combine Bootstrap cards with icons for visually appealing options:
- Centered Layout: Focus on the icon and content
- Remix Icons: Beautiful icon integration
- Consistent Spacing: Well-balanced padding and margins
Image Options
Create rich image-based options using Bootstrap's card components:
- Card Images: Showcase visual options
- Responsive Design: Images scale appropriately
- Clear Labels: Descriptive text with images