# 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
<div class="custom-header">
    <img src="{{app.logoURL}}" alt="Company Logo" class="logo">
    <h1>{{app.companyName}}</h1>
    <div class="user-info">
        Welcome, {{app.user.firstName}}!
    </div>
</div>
```

### 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
<!-- Custom fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<!-- Font Awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<!-- Custom CSS framework -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
```

### Using Custom Fonts

```css
/* Apply custom font to entire app */
body {
    font-family: 'Inter', sans-serif;
}

/* Apply to specific elements */
.page-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 28px;
}
```

## Responsive Design Considerations

### Mobile-First Approach

```json
{
  "type": "input",
  "label": "Customer Name",
  "model": "customerName",
  "styleClasses": "col-xs-12 col-sm-8 col-md-6 col-lg-4"
}
```

### Responsive Utilities

```css
/* Hide on mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none;
    }
}

/* Stack buttons on mobile */
@media (max-width: 768px) {
    .btn-group .btn {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
}
```

## Common Styling Patterns

### Card-Style Containers

```css
.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 24px;
    margin-bottom: 24px;
}

.card-header {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #212529;
    margin: 0;
}
```

### Form Styling

```css
.form-section {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
}

.form-section h3 {
    color: #495057;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.form-group {
    margin-bottom: 16px;
}

.form-control {
    border-radius: 4px;
    border: 1px solid #ced4da;
    padding: 8px 12px;
}
```

### Status Indicators

```css
.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.status-active {
    background-color: #d4edda;
    color: #155724;
}

.status-pending {
    background-color: #fff3cd;
    color: #856404;
}

.status-inactive {
    background-color: #f8d7da;
    color: #721c24;
}
```

## Integration with FileMaker Data

### Dynamic Styling Based on Data

```json
{
  "type": "html",
  "html": "<div class=\"status-badge status-{{model.record.status}}\">{{model.record.status}}</div>",
  "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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET 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?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.