> For the complete documentation index, see [llms.txt](https://docs.klai.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.klai.studio/getting-started/ide-quick-tour/4.-common-customizations-and-expanding-your-app/4.4-basic-app-styling-site-styling-ui.md).
# 4.4 Basic App Styling (Site Styling UI)
Styling is what transforms a functional BetterForms app into a polished, professional application. This section covers the fundamentals of styling your app using the Site Styling UI and Bootstrap CSS framework.
## BetterForms Styling Foundation
### Built on Bootstrap CSS
BetterForms is built with **Bootstrap 3.3.7** as the core UI framework, providing:
* **Responsive grid system** for layout
* **Pre-built components** (buttons, forms, tables)
* **Utility classes** for spacing, colors, and typography
* **Mobile-first design** principles
### Two Main Styling Approaches
1. **Bootstrap Classes** - Use existing Bootstrap classes
2. **Custom CSS** - Add your own styles for unique designs
## Where to Configure Styling in the IDE
### Site-Level Styling (Global)
1. **Open App Settings** in the BetterForms IDE
2. **Navigate to Environment section**
3. **Find styling-related tabs:**
* **CSS** - Custom CSS styles
* **Theme Settings** - Built-in themes and layout options
* **Slots** - Header, footer, and other page sections
* **DOM Header Insertions** - External CSS libraries
### Page-Level Styling (Individual Elements)
1. **Open any page** in the BetterForms IDE
2. **Navigate to Page Builder tab**
3. **Use `styleClasses` property** on individual elements
## Basic Element Styling
### Using Bootstrap Classes
Every element in BetterForms supports the `styleClasses` property:
```json
{
"type": "input",
"label": "Customer Name",
"model": "customerName",
"styleClasses": "col-md-6 col-sm-12"
}
```
### Common Bootstrap Layout Classes
**Column Widths:**
* `col-md-12` - Full width (12 columns)
* `col-md-6` - Half width (6 columns)
* `col-md-4` - One-third width (4 columns)
* `col-md-3` - One-quarter width (3 columns)
**Responsive Breakpoints:**
* `col-xs-*` - Extra small devices (phones)
* `col-sm-*` - Small devices (tablets)
* `col-md-*` - Medium devices (desktops)
* `col-lg-*` - Large devices (large desktops)
### Button Styling Classes
```json
{
"type": "button",
"text": "Save Record",
"buttonClasses": "btn btn-success btn-lg",
"styleClasses": "col-md-4 text-center"
}
```
**Button Classes:**
* `btn-primary` - Blue (default)
* `btn-success` - Green
* `btn-danger` - Red
* `btn-warning` - Yellow
* `btn-info` - Light blue
* `btn-secondary` - Gray
**Button Sizes:**
* `btn-lg` - Large
* `btn-sm` - Small
* `btn-xs` - Extra small
## Site-Wide CSS Customization
### Where to Add Custom CSS
1. **Go to App Settings → Environment → CSS**
2. **Add your custom CSS styles**
3. **Save changes**
### Basic Custom CSS Example
```css
/* Custom button style */
.btn-custom {
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
padding: 10px 20px;
font-weight: bold;
}
.btn-custom:hover {
background-color: #0056b3;
color: white;
}
/* Custom input styling */
.form-control-custom {
border: 2px solid #007bff;
border-radius: 6px;
padding: 12px;
}
/* Custom container spacing */
.section-spacing {
margin-top: 30px;
margin-bottom: 30px;
}
```
### Using Custom CSS in Elements
```json
{
"type": "button",
"text": "Custom Button",
"buttonClasses": "btn btn-custom",
"styleClasses": "col-md-4"
}
```
## Page-Specific Styling
### Adding Page-Level Classes
You can add classes to entire pages for targeted styling:
```json
{
"schema": {
"styleClasses": "dashboard-page",
"fields": [
// Your page elements
]
}
}
```
### Page-Specific CSS
```css
/* Styles that only apply to dashboard pages */
.dashboard-page .btn {
border-radius: 12px;
}
.dashboard-page .form-control {
border-color: #28a745;
}
.dashboard-page h1 {
color: #007bff;
font-weight: 300;
}
```
## Theme Settings and Layout Options
### Built-in Theme Options
1. **Navigate to App Settings → Environment → Theme Settings**
2. **Select from available themes:**
* Default theme
* Dark theme
* Light theme
* Custom color schemes
### Layout Control Options
**Navigation Options:**
* Show/hide left sidebar navigation
* Navigation position (top or side)
* Navigation width
**Header Options:**
* Show/hide header
* Header height
* Header background color
**Page Layout:**
* Container width
* Page background
* Content padding
## Advanced Styling with Slots
### What are Slots?
Slots are predefined areas where you can inject custom HTML and CSS:
* **Header slots** - Top of the page
* **Footer slots** - Bottom of the page
* **Navigation slots** - Within the navigation menu
### Adding Custom Header Content
1. **Go to App Settings → Environment → Slots**
2. **Select Header slot**
3. **Add your HTML content:**
```html
```
### Styling Slot Content
```css
.custom-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
background-color: #f8f9fa;
border-bottom: 1px solid #dee2e6;
}
.custom-header .logo {
height: 40px;
width: auto;
}
.custom-header h1 {
margin: 0;
font-size: 24px;
color: #007bff;
}
.user-info {
font-size: 14px;
color: #6c757d;
}
```
## External Libraries and Fonts
### Adding External CSS Libraries
Use DOM Header Insertions to add external libraries:
1. **Go to App Settings → Environment → DOM Header Insertions**
2. **Load First section** for critical CSS:
```html
{{model.record.status}}
",
"styleClasses": "col-md-2"
}
```
### Conditional Styling
```json
{
"type": "button",
"text": "Edit",
"buttonClasses_calc": "model.user.canEdit ? 'btn btn-primary' : 'btn btn-secondary'",
"styleClasses": "col-md-2"
}
```
## Best Practices for App Styling
### 1. **Consistent Design System**
* Use a limited color palette
* Maintain consistent spacing
* Use the same fonts throughout
* Apply consistent button styles
### 2. **Performance Optimization**
* Minimize custom CSS
* Use external libraries judiciously
* Optimize images and assets
* Test loading times
### 3. **Mobile-First Design**
* Design for mobile first
* Use responsive breakpoints
* Test on various devices
* Consider touch interactions
### 4. **Accessibility**
* Ensure sufficient color contrast
* Use semantic HTML elements
* Provide alternative text for images
* Test with screen readers
## Common Styling Issues and Solutions
### Issue: Custom CSS Not Applying
**Solution:**
1. Check CSS syntax for errors
2. Ensure CSS is in the correct section (Site CSS)
3. Use browser developer tools to inspect elements
4. Check CSS specificity (be more specific)
### Issue: Responsive Layout Breaking
**Solution:**
1. Test with different screen sizes
2. Use proper Bootstrap grid classes
3. Avoid fixed widths
4. Test on real devices
### Issue: Styling Conflicts
**Solution:**
1. Use more specific CSS selectors
2. Check for conflicting Bootstrap classes
3. Use `!important` sparingly
4. Organize CSS logically
## Next Steps
Now that you understand basic styling, you can:
* **Explore advanced customization** - Custom components and themes
* **Learn about authentication** - See [Authentication](/reference/authentication.md)
* **Optimize performance** - See [Environment Deep Dive](/getting-started/ide-quick-tour/environment.md)
## Resources
* [Bootstrap 3.3.7 Documentation](https://getbootstrap.com/docs/3.3/)
* [CSS Grid Guide](https://css-tricks.com/snippets/css/complete-guide-grid/)
* [Responsive Design Basics](https://developers.google.com/web/fundamentals/design-and-ux/responsive)
{% hint style="info" %}
**Testing Tip:** Use your browser's developer tools to test CSS changes live before adding them to your site settings.
{% endhint %}