# Layout

Xena's responsive layout is *based* on Bootstrap. If the browser supports CSS grid we will use that instead of Bootstraps grid system. You build your layout in rows and columns. Think “mobile first” when putting in your classes – always start with `col-xs-12`.

{% hint style="info" %}
If you do not need responsive columns (e.g. only one column is needed), then don't use the `row` and `col-` divs. Just insert your `section` and you are good to go.
{% endhint %}

![Two panels, full width.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoPMsV6ejUj2DeUpDp%2F-LZoPO7WJWq_sJQp08_5%2Flayout-standard.PNG?generation=1551362528727667\&alt=media)

```markup

<div class="row">
    <div class="col-xs-12">
        <section class="panel panel-default">
            <header class="panel-heading">
                <h2 class="panel-title">Panel</h2>
            </header>
            <div class="panel-body">Indhold</div>
        </section>
    </div>
    <div class="col-xs-12">
        <section class="panel panel-default">
            <header class="panel-heading">
                <h2 class="panel-title">Panel</h2>
            </header>
            <div class="panel-body">Indhold</div>
        </section>
    </div>
</div>
```

By setting more classes you can tell how the layout should change based on how big the screen is.

![Two panels side by side.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoPMsV6ejUj2DeUpDp%2F-LZoPO7YMA1XYHHmNx-v%2Flayout-cols.PNG?generation=1551362528685632\&alt=media)

```markup
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-7 col-lg-8 col-xl-9">
        <section class="panel panel-default">
            <header class="panel-heading">
                <h2 class="panel-title">Panel</h2>
            </header>
            <div class="panel-body">Indhold</div>
        </section>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-5 col-lg-4 col-xl-3">
        <section class="panel panel-default">
            <header class="panel-heading">
                <h2 class="panel-title">Panel</h2>
            </header>
            <div class="panel-body">Indhold</div>
        </section>
    </div>
</div>
```

## Classes

### Extra Small

* `col-xs-1`
* `col-xs-2`
* `col-xs-3`
* `col-xs-4`
* `col-xs-5`
* `col-xs-6`
* `col-xs-7`
* `col-xs-8`
* `col-xs-9`
* `col-xs-10`
* `col-xs-11`
* `col-xs-12` (always start with this one)

### Small

* `col-sm-1`
* `col-sm-2`
* `col-sm-3`
* `col-sm-4`
* `col-sm-5`
* `col-sm-6`
* `col-sm-7`
* `col-sm-8`
* `col-sm-9`
* `col-sm-10`
* `col-sm-11`
* `col-sm-12`

### Medium

* `col-md-1`
* `col-md-2`
* `col-md-3`
* `col-md-4`
* `col-md-5`
* `col-md-6`
* `col-md-7`
* `col-md-8`
* `col-md-9`
* `col-md-10`
* `col-md-11`
* `col-md-12`

### Large

* `col-lg-1`
* `col-lg-2`
* `col-lg-3`
* `col-lg-4`
* `col-lg-5`
* `col-lg-6`
* `col-lg-7`
* `col-lg-8`
* `col-lg-9`
* `col-lg-10`
* `col-lg-11`
* `col-lg-12`

### Extra Large

* `col-xl-1`
* `col-xl-2`
* `col-xl-3`
* `col-xl-4`
* `col-xl-5`
* `col-xl-6`
* `col-xl-7`
* `col-xl-8`
* `col-xl-9`
* `col-xl-10`
* `col-xl-11`
* `col-xl-12`